import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class CommunityDropdown extends StatelessWidget {
  final String? selectedValue;
  final Function(String?) onChanged;
  final TextEditingController _searchController = TextEditingController();

  CommunityDropdown({
    Key? key,
    required this.selectedValue,
    required this.onChanged,
  }) : 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),
          BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
            builder: (context, state) {
              return SizedBox(
                  child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                ),
                child: DropdownButton2<String>(
                  underline: SizedBox(),
                  value: selectedValue,
                  items: state.communityList.map((community) {
                    return DropdownMenuItem<String>(
                      value: community.uuid,
                      child: Text(
                        '  ${community.name}',
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    );
                  }).toList(),
                  onChanged: onChanged,
                  style: TextStyle(color: Colors.black),
                  hint: Padding(
                    padding: 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
                                ? "  ${state.communityList.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,
                  ),
                ),
              ));
            },
          ),
        ],
      ),
    );
  }
}