import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:ui_web' as ui;
import 'dart:html' as html;
import 'dart:js' as js;
import 'api_service.dart';

class EmailToolbar extends StatefulWidget {
  final Function(String) onJumpToSpan;
  final VoidCallback onButtonPressed;

  EmailToolbar(
      {Key? key, required this.onButtonPressed, required this.onJumpToSpan})
      : super(key: key);

  @override
  _DynamicClassesAugment createState() => _DynamicClassesAugment();
}

class _DynamicClassesAugment extends State<EmailToolbar> {
  String selectedClass = 'Class 1';
  TextEditingController _jumpController = TextEditingController();

  late final FocusNode _JumpItemfocusNode;
  late final FocusNode _viewSpecsfocusNode;

  bool _jumpItemHasFocus = false;
  bool _viewSpecsHasFocus = false;

  @override
  void initState() {
    super.initState();
    _JumpItemfocusNode = FocusNode();
    _viewSpecsfocusNode = FocusNode();

    _JumpItemfocusNode.addListener(() {
      setState(() => _jumpItemHasFocus = _JumpItemfocusNode.hasFocus);
    });

    _viewSpecsfocusNode.addListener(() {
      setState(() => _viewSpecsHasFocus = _viewSpecsfocusNode.hasFocus);
    });
  }

  @override
  void dispose() {
    // _JumpItemfocusNode.dispose();
    // _viewSpecsfocusNode.dispose();
    _jumpController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const animationDuration = Duration(milliseconds: 250);

    return Column(children: [
      Row(
        children: [
          ElevatedButton(
            onPressed: () => AugmentClasses.handleHome(context),
            child: Text('Home'),
          ),
          SizedBox(width: 8),
          ElevatedButton(
            onPressed: AugmentClasses.handleReload,
            child: Text('Reload'),
          ),
          ElevatedButton(
            onPressed: AugmentClasses.handleImages,
            child: Text('Images'),
          ),
          SizedBox(width: 8),
          ElevatedButton(
            onPressed: AugmentClasses.handleOpen,
            child: Text('Open'),
          ),
          // SizedBox(width: 8),
          ElevatedButton(
            onPressed: AugmentClasses.handleFind,
            child: Text('Find'),
          ),
          // SizedBox(width: 8),
          ElevatedButton(
            onPressed: AugmentClasses.handleStop,
            child: Text('Stop'),
          ),
          Spacer(),
          PopupMenuButton<String>(
            onSelected: (String value) {
              setState(() {
                selectedClass = value;
                print(selectedClass);
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'Class 1',
                child: Text('Class 1'),
              ),
              const PopupMenuItem<String>(
                value: 'Class 2',
                child: Text('Class 2'),
              ),
              const PopupMenuItem<String>(
                value: 'Turbo 3',
                child: Text('Turbo 3'),
              ),
            ],
            // child: ElevatedButton(
            // onPressed: () {},
            child: Text('Options'),
          ),
        ],
      ),
      if (selectedClass == 'Class 2')
        Stack(children: [
          Row(
            children: [
              Container(
                width: 150,
                height: 30,
                child: TextField(
                  controller: _jumpController,
                  decoration: InputDecoration(
                      labelText: 'Jump Item',
                      border: OutlineInputBorder(),
                      suffixIcon: Icon(Icons.search)),
                  onSubmitted: (value) {
                    print("onSubmitted");
                    if (value.isNotEmpty) {
                      widget.onJumpToSpan(value);
                    }
                  },
                ),
              ),
              //TODO: Make an animation to make the button a textfield
              // AnimatedSwitcher(
              //   duration: animationDuration,
              //   transitionBuilder: (Widget child, Animation<double> animation) {
              //     return FadeTransition(opacity: animation, child: child);
              //   },
              //   child: _jumpItemHasFocus
              //       ? Container(
              //           key: ValueKey('TextField1'),
              //           width: 150,
              //           child: TextField(
              //             focusNode: _JumpItemfocusNode,
              //             decoration: InputDecoration(
              //               hintText: 'Enter Text',
              //               border: OutlineInputBorder(),
              //             ),
              //           ),

              //         )
              //       : Container(
              //           key: ValueKey('Button1'),
              //           child: ElevatedButton(
              //             onPressed: () => _JumpItemfocusNode.requestFocus(),
              //             child: Text('Jump Item:'),
              //         ),
              //       ),
              // ),
              SizedBox(width: 8),
              Container(
                width: 150,
                height: 30,
                child: TextField(
                  decoration: InputDecoration(
                      labelText: 'viewSpecs',
                      border: OutlineInputBorder(),
                      suffixIcon: Icon(Icons.style_rounded)),
                ),
              ),
              ElevatedButton(
                onPressed: AugmentClasses.handleImages,
                child: Text('Filter'),
              ),
              SizedBox(width: 8),
              ElevatedButton(
                onPressed: AugmentClasses.handleOpen,
                child: Text('Lookup'),
              ),
              // SizedBox(width: 8),
              ElevatedButton(
                onPressed: AugmentClasses.handleFind,
                child: Text('Create Link'),
              ),
              ElevatedButton(
                onPressed: AugmentClasses.handleFind,
                child: Text('Paste Link'),
              ),
            ],
          )
        ])
    ]);
  }
}

class AugmentClasses {
  static void handleHome(BuildContext context) {
    Navigator.of(context).popUntil((route) => route.isFirst);
  }

  static void handleReload() {
    print("reload");
  }

  static void handleImages() {
    print("Images button pressed");
  }

  static void handleOpen() {
    print("Open button pressed");
  }

  static void handleFind() {
    print("Find button pressed");
  }

  static void handleStop() {
    print("Stop button pressed");
  }

  static void handleJump(String viewTypeId, String spanId) {
    print(spanId);
    // final jsCode = '''
    // var iframe = document.getElementById("iframe#$viewTypeId").contentWindow;
    // var element = iframe.document.getElementById('$spanId');
    // if (element) {
    //   element.scrollIntoView({behavior: "smooth", block: "start"});
    // }
    // ''';
// final jsCode = '''
//     var iframe = document.getElementById("$viewTypeId");
//     if (iframe) {
//       var iframeWindow = iframe.contentWindow;
//       if (iframeWindow && iframeWindow.document) {
//         var element = iframeWindow.document.getElementById('$spanId');
//         if (element) {
//           element.scrollIntoView({behavior: "smooth", block: "start"});
//           console.log("Scrolling to element with ID: $spanId");
//         } else {
//           console.error("Element with ID $spanId not found in iframe.");
//         }
//       } else {
//         console.error("Iframe contentWindow or document is not accessible.");
//       }
//     } else {
//       console.error("Iframe with ID $viewTypeId not found.");
//     }
//   ''';
    // print('jumped'); // For debugging in Dart

    // // Execute the JavaScript code
    // js.context.callMethod('eval', [jsCode]);
    // Select the first iframe on the page
    String js_code = '''
      var iframe = document.getElementsByTagName('iframe')[0]; // 0 for the first iframe, 1 for the second, etc.

      // Check if the iframe is loaded and has content
      if (iframe && iframe.contentDocument) {
          // Access the document inside the iframe
          var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

          // Find the element with the specific id inside the iframe
          var targetElement = iframeDoc.getElementById("$spanId"); // Replace '36 ' with the actual id of the target element

          // If the element exists, scroll to it
          if (targetElement) {
              targetElement.scrollIntoView();
              console.log('Scrolled to element with id "$spanId" inside the iframe.');
          } else {
              console.log('Element with id "$spanId" not found inside the iframe.');
          }
      } else {
          console.log('Iframe not found or not loaded.');
      }
      ''';
      js.context.callMethod('eval', [js_code]);
  }
}