tm_app/lib/views/shared/main_drop_down.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';

import '../../core/constants/assets.dart';

class MainDropDown extends StatefulWidget {
  const MainDropDown({
    required this.onSelect,
    required this.items,
    required this.text,
    super.key,
    this.backgroundColor,
    this.active = true,
  });
  final ValueChanged<String> onSelect;
  final List<String> items;
  final Color? backgroundColor;
  final String text;
  final bool active;

  @override
  State<MainDropDown> createState() => _MainDropDownState();
}

class _MainDropDownState extends State<MainDropDown> {
  final LayerLink _layerLink = LayerLink();
  OverlayEntry? _overlayEntry;
  String? selectedItemText;

  void _showPopupMenu() {
    if (_overlayEntry == null) {
      OverlayState? overlayState = Overlay.of(context);
      _overlayEntry = _createOverlayEntry();
      overlayState.insert(_overlayEntry!);
      setState(() {});
    } else {
      _hidePopupMenu();
    }
  }

  void _hidePopupMenu() {
    setState(() {
      _overlayEntry?.remove();
      _overlayEntry = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return _body();
  }

  Widget _body() {
    return CompositedTransformTarget(
      link: _layerLink,
      child: GestureDetector(
        onTap: () {
          if (widget.active) {
            _showPopupMenu();
          } else {
            return;
          }
        },
        child: Container(
          width: 168.0.w(),
          height: 40.0.h(),
          decoration: BoxDecoration(
            color: widget.backgroundColor ?? Colors.transparent,
            borderRadius: BorderRadius.circular(12.0),
            border: Border.all(color: AppColors.secondaryborder),
          ),
          child: Row(
            children: [
              SizedBox(width: 10.0.w()),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: 120.0.w(),
                    child: Text(
                      selectedItemText ?? widget.text,
                      style: TextStyle(
                        color: AppColors.grey80,
                        fontSize: 16.0.sp(),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ],
              ),
              const Spacer(),

              SvgPicture.asset(
                _overlayEntry == null
                    ? AssetsManager.arrowDown
                    : AssetsManager.arrowUp,
              ),
              SizedBox(width: 12.0.w()),
            ],
          ),
        ),
      ),
    );
  }

  OverlayEntry _createOverlayEntry() {
    return OverlayEntry(
      builder:
          (context) => Positioned(
            width: 168.0.w(),
            child: CompositedTransformFollower(
              link: _layerLink,
              showWhenUnlinked: false,
              offset: Offset(0, 48.0.h()), // Offset below the TextField
              child: _notificationsMessages(),
            ),
          ),
    );
  }

  Widget _notificationsMessages() {
    return Material(
      color: Colors.transparent,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 4.0.h()),
        decoration: BoxDecoration(
          color: AppColors.white,
          borderRadius: BorderRadius.circular(12.0),
          border: Border.all(color: AppColors.secondaryborder),
        ),
        child: Column(
          children: [
            ...widget.items.map((String choice) {
              return GestureDetector(
                onTap: () {
                  setState(() {
                    selectedItemText = choice;
                    widget.onSelect(choice);
                  });
                  _hidePopupMenu();
                },
                child: Column(
                  children: [
                    SizedBox(
                      width: double.maxFinite,
                      child: Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: 16.0.w(),
                          vertical: 8.0.h(),
                        ),
                        child: Text(
                          choice,
                          style: TextStyle(
                            fontSize: 16.0.sp(),
                            fontWeight: FontWeight.w400,
                            color: AppColors.grey70,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _overlayEntry?.remove();
    _overlayEntry = null;
    super.dispose();
  }
}