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

class CommunityDropdown extends StatelessWidget {
  final String? selectedValue;
  final List<CommunityModel> communities;
  final Function(String?) onChanged;
  final TextEditingController _searchController = TextEditingController();

  CommunityDropdown({
    Key? key,
    required this.selectedValue,
    required this.onChanged,
    required this.communities,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Community",
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  fontWeight: FontWeight.w400,
                  fontSize: 13,
                  color: ColorsManager.blackColor,
                ),
          ),
          const SizedBox(height: 8),
          SizedBox(
              child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
            ),
            child: DropdownButton2<String>(
              underline: const SizedBox(),
              value: selectedValue,
              items: communities.map((community) {
                return DropdownMenuItem<String>(
                  value: community.uuid,
                  child: Text(
                    '  ${community.name}',
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                );
              }).toList(),
              onChanged: onChanged,
              style: const TextStyle(color: Colors.black),
              hint: Padding(
                padding: const EdgeInsets.only(left: 10),
                child: Text(
                  "  Please Select",
                  style: Theme.of(context).textTheme.bodySmall!.copyWith(
                        color: ColorsManager.textGray,
                      ),
                ),
              ),
              customButton: Container(
                height: 45,
                decoration: BoxDecoration(
                  border: Border.all(color: ColorsManager.textGray, width: 1.0),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      flex: 5,
                      child: Text(
                        selectedValue != null
                            ? "  ${communities.firstWhere((element) => element.uuid == selectedValue).name}"
                            : '  Please Select',
                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
                              color: selectedValue != null
                                  ? Colors.black
                                  : ColorsManager.textGray,
                            ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.grey[100],
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(10),
                            bottomRight: Radius.circular(10),
                          ),
                        ),
                        height: 45,
                        child: const Icon(
                          Icons.keyboard_arrow_down,
                          color: ColorsManager.textGray,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              dropdownStyleData: DropdownStyleData(
                maxHeight: MediaQuery.of(context).size.height * 0.4,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              dropdownSearchData: DropdownSearchData(
                searchController: _searchController,
                searchInnerWidgetHeight: 50,
                searchInnerWidget: Container(
                  height: 50,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  child: TextFormField(
                    style: const TextStyle(color: Colors.black),
                    controller: _searchController,
                    decoration: InputDecoration(
                      isDense: true,
                      contentPadding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 12,
                      ),
                      hintText: 'Search for community...',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ),
                ),
                searchMatchFn: (item, searchValue) {
                  final communityName =
                      (item.child as Text).data?.toLowerCase() ?? '';
                  return communityName
                      .contains(searchValue.toLowerCase().trim());
                },
              ),
              onMenuStateChange: (isOpen) {
                if (!isOpen) {
                  _searchController.clear();
                }
              },
              menuItemStyleData: const MenuItemStyleData(
                height: 40,
              ),
            ),
          ))
        ],
      ),
    );
  }
}
