import 'dart:async';

import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
import '../themes/themes.dart';

class AppDropdownSearch<T> extends StatelessWidget {
  final void Function(dynamic)? onChanged;
  final dynamic selectedItem;
  final String? etiqueta;
  final TextEditingController controller;
  final String Function(dynamic)? itemAsString;
  final Future<List<dynamic>> Function(String)? asyncItems;
  final bool enabled;
  final List<dynamic> items;
  final String? Function(dynamic)? validator;
  final dynamic Function()? onPressedClear;
  final DropdownSearchCompareFn? compareFn;

  const AppDropdownSearch({
    super.key,
    required this.controller,
    this.itemAsString,
    this.asyncItems,
    this.etiqueta,
    this.selectedItem,
    this.onChanged,
    this.onPressedClear,
    this.validator,
    this.enabled = true,
    this.items = const [],
    this.compareFn,
  });

  double _getFontSize(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth < 480) {
      return 12;
    } else if (screenWidth < 800) {
      return 15;
    }
    return 16;
  }

  @override
  Widget build(BuildContext context) {
    double fontSize = _getFontSize(context);
    TextStyle dropdownTextStyle = TextStyle(fontSize: fontSize);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (etiqueta != null)
          Text(
            etiqueta.toString(),
            style: TextStyle(fontSize: fontSize, fontWeight: FontWeight.bold),
          ),
        if (etiqueta != null) const SizedBox(height: 5),
        DropdownSearch(
          suffixProps: const DropdownSuffixProps(
            clearButtonProps: ClearButtonProps(
              isVisible: true,
              icon: const Icon(Icons.clear),
              iconSize: 20,
            ),
          ),
          compareFn: compareFn,
          validator: validator,
          onChanged: onChanged,
          // asyncItems: asyncItems,
          items: (filter, infiniteScrollProps) => items,
          itemAsString: itemAsString,
          selectedItem: selectedItem,
          enabled: enabled,
          popupProps: PopupProps.menu(
            emptyBuilder: (context, searchEntry) => Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.inbox, size: 60, color: Colors.grey),
                  const SizedBox(height: 10),
                  Text(
                    'No se encontró información',
                    style: dropdownTextStyle,
                  ),
                ],
              ),
            ),
            // isFilterOnline: true,
            showSearchBox: true,
            searchFieldProps: TextFieldProps(
              controller: controller,
              autofocus: true,
              decoration: InputDecoration(
                hintText: 'Teclee para buscar',
                hintStyle: dropdownTextStyle,
                suffixIcon: const Icon(Icons.search, color: Colors.grey),
                fillColor: Colors.white,
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: AppTheme.primary),
                ),
                enabledBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey),
                ),
                errorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey[400]!,
                  ),
                ),
                focusedErrorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: AppTheme.primary,
                  ),
                ),
                floatingLabelStyle: TextStyle(
                  color: AppTheme.primary,
                  fontSize: fontSize,
                ),
              ),
            ),
          ),
          decoratorProps: DropDownDecoratorProps(
            baseStyle: dropdownTextStyle,
            decoration: InputDecoration(
              fillColor: Colors.white,
              suffixIcon: Icon(
                Icons.arrow_drop_down_circle,
                color: AppTheme.primary,
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  color: AppTheme.primary,
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  color: Colors.grey[400]!,
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  color: Colors.grey[300]!,
                ),
              ),
              focusedErrorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  color: AppTheme.primary,
                ),
              ),
              disabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  color: Colors.grey[300]!,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}