import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class TagDialogTextfieldDropdown extends StatefulWidget {
  final List<Tag> items;
  final ValueChanged<Tag> onSelected;
  final Tag? initialValue;
  final String product;

  const TagDialogTextfieldDropdown({
    Key? key,
    required this.items,
    required this.onSelected,
    this.initialValue,
    required this.product,
  }) : super(key: key);

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

class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
  bool _isOpen = false;
  OverlayEntry? _overlayEntry;
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  List<Tag> _filteredItems = [];

  @override
  void initState() {
    super.initState();
    _controller.text = widget.initialValue?.tag ?? '';

    _filterItems();

    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) {
        // Call onSelected when focus is lost
        final selectedTag = _filteredItems.firstWhere(
          (tag) => tag.tag == _controller.text,
          orElse: () => Tag(tag: _controller.text),
        );
        widget.onSelected(selectedTag);
        _closeDropdown();
      }
    });
  }

  void _filterItems() {
    setState(() {
      _filteredItems = widget.items;
      // .where((tag) => tag.product?.uuid == widget.product)
      // .toList();
    });
  }

  void _toggleDropdown() {
    if (_isOpen) {
      _closeDropdown();
    } else {
      _openDropdown();
    }
  }

  void _openDropdown() {
    _overlayEntry = _createOverlayEntry();
    Overlay.of(context).insert(_overlayEntry!);
    _isOpen = true;
  }

  void _closeDropdown() {
    if (_isOpen && _overlayEntry != null) {
      _overlayEntry!.remove();
      _overlayEntry = null;
      _isOpen = false;
    }
  }

  OverlayEntry _createOverlayEntry() {
    final renderBox = context.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);

    return OverlayEntry(
      builder: (context) {
        return GestureDetector(
          onTap: _closeDropdown,
          behavior: HitTestBehavior.translucent,
          child: Stack(
            children: [
              Positioned(
                left: offset.dx,
                top: offset.dy + size.height,
                width: size.width,
                child: Material(
                  elevation: 4.0,
                  child: Container(
                    color: ColorsManager.whiteColors,
                    constraints: const BoxConstraints(maxHeight: 200.0),
                    child: StatefulBuilder(
                      builder: (context, setStateDropdown) {
                        return ListView.builder(
                          shrinkWrap: true,
                          itemCount: _filteredItems.length,
                          itemBuilder: (context, index) {
                            final tag = _filteredItems[index];

                            return Container(
                              decoration: const BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                    color: ColorsManager.lightGrayBorderColor,
                                    width: 1.0,
                                  ),
                                ),
                              ),
                              child: ListTile(
                                title: Text(tag.tag ?? '',
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                            color: ColorsManager
                                                .textPrimaryColor)),
                                onTap: () {
                                  _controller.text = tag.tag ?? '';
                                  widget.onSelected(tag);
                                  setState(() {
                                    _filteredItems.remove(tag);
                                  });
                                  _closeDropdown();
                                },
                              ),
                            );
                          },
                        );
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      behavior: HitTestBehavior.opaque,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
        decoration: BoxDecoration(
          border: Border.all(color: ColorsManager.transparentColor),
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                focusNode: _focusNode,
                onFieldSubmitted: (value) {
                  final selectedTag = _filteredItems.firstWhere(
                      (tag) => tag.tag == value,
                      orElse: () => Tag(tag: value));
                  widget.onSelected(selectedTag);
                  _closeDropdown();
                },
                onTapOutside: (event) {
                  widget.onSelected(_filteredItems.firstWhere(
                      (tag) => tag.tag == _controller.text,
                      orElse: () => Tag(tag: _controller.text)));
                  _closeDropdown();
                },
                style: Theme.of(context).textTheme.bodyMedium,
                decoration: const InputDecoration(
                  hintText: 'Enter or Select a tag',
                  border: InputBorder.none,
                ),
              ),
            ),
            GestureDetector(
              onTap: _toggleDropdown,
              child: const Icon(Icons.arrow_drop_down),
            ),
          ],
        ),
      ),
    );
  }
}
