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/pages/spaces_management/all_spaces/model/community_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';

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

  const 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) {
              List<CommunityModel> communities =
                  state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList;

              return SizedBox(
                child: DropdownButtonFormField<String>(
                  dropdownColor: ColorsManager.whiteColors,
                  value: selectedValue,
                  items: communities.map((community) {
                    return DropdownMenuItem<String>(
                      value: community.uuid,
                      child: Text('   ${community.name}'),
                    );
                  }).toList(),
                  onChanged: onChanged,
                  icon: const SizedBox.shrink(),
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  hint: Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: Text(
                      "Please Select",
                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
                            color: ColorsManager.textGray,
                          ),
                    ),
                  ),
                  decoration: inputTextFormDeco().copyWith(
                    contentPadding: EdgeInsets.zero,
                    suffixIcon: Container(
                      padding: EdgeInsets.zero,
                      width: 70,
                      height: 45,
                      decoration: BoxDecoration(
                        color: Colors.grey[100],
                        borderRadius: const BorderRadius.only(
                          bottomRight: Radius.circular(10),
                          topRight: Radius.circular(10),
                        ),
                        border: Border.all(
                          color: ColorsManager.textGray,
                          width: 1.0,
                        ),
                      ),
                      child: const Center(
                        child: Icon(
                          Icons.keyboard_arrow_down,
                          color: ColorsManager.textGray,
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}