import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class DialogTextfieldDropdown extends StatefulWidget {
  final List<String> items;
  final ValueChanged<String> onSelected;
  final String? initialValue;

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

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

class _DialogTextfieldDropdownState extends State<DialogTextfieldDropdown> {
  bool _isOpen = false;
  late OverlayEntry _overlayEntry;
  final TextEditingController _controller = TextEditingController();
  late List<String> _filteredItems; // Filtered items list

  @override
  void initState() {
    super.initState();
    _controller.text = widget.initialValue ?? 'Select Tag';
    _filteredItems = List.from(widget.items); // Initialize filtered items
  }

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

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

  void _closeDropdown() {
    _overlayEntry.remove();
    _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: ListView.builder(
                      shrinkWrap: true,
                      itemCount: _filteredItems.length,
                      itemBuilder: (context, index) {
                        final item = _filteredItems[index];
                        return Container(
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                color: ColorsManager.lightGrayBorderColor,
                                width: 1.0,
                              ),
                            ),
                          ),
                          child: ListTile(
                            title: Text(item,
                                style: Theme.of(context)
                                    .textTheme
                                    .bodyMedium
                                    ?.copyWith(
                                        color: ColorsManager.textPrimaryColor)),
                            onTap: () {
                              _controller.text = item;
                              widget.onSelected(item);
                              setState(() {
                                _filteredItems
                                    .remove(item); // Remove selected item
                              });
                              _closeDropdown();
                            },
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleDropdown,
      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,
                onChanged: (value) {
                  setState(() {
                    _filteredItems = widget.items
                        .where((item) =>
                            item.toLowerCase().contains(value.toLowerCase()))
                        .toList(); // Filter items dynamically
                  });
                  widget.onSelected(value);
                },
                style: Theme.of(context).textTheme.bodyMedium,
                decoration: const InputDecoration(
                  hintText: 'Enter or Select tag',
                  border: InputBorder.none,
                ),
              ),
            ),
            const Icon(Icons.arrow_drop_down),
          ],
        ),
      ),
    );
  }
}