import 'package:flutter/material.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;

class EmailToolbar extends StatefulWidget {
  final VoidCallback onButtonPressed;

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

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

class _DynamicClassesAugment extends State<EmailToolbar> {
  String selectedClass = 'Class 1';
  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();
    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(
                  decoration: InputDecoration(
                      labelText: 'Jump Item',
                      border: OutlineInputBorder(),
                      suffixIcon: Icon(Icons.search)),
                ),
              ),
              //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 button pressed");
  }

  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");
  }
}