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

class SpaceDropdown extends StatelessWidget {
  final List<SpaceModel> spaces;
  final String? selectedValue;
  final Function(String?)? onChanged;
  final String hintMessage;

  const SpaceDropdown({
    super.key,
    required this.spaces,
    required this.selectedValue,
    required this.onChanged,
    required this.hintMessage,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Space',
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  fontWeight: FontWeight.w400,
                  fontSize: 13,
                  color: ColorsManager.blackColor,
                ),
          ),
          SizedBox(
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
              ),
              child: DropdownButton2<String>(
                underline: const SizedBox(),
                value: selectedValue,
                items: spaces.map((space) {
                  return DropdownMenuItem<String>(
                    value: space.uuid,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          '   ${space.name}',
                          style:
                              Theme.of(context).textTheme.bodyMedium!.copyWith(
                                    fontSize: 12,
                                    color: ColorsManager.blackColor,
                                  ),
                        ),
                        Text(
                          '   ${space.lastThreeParents}',
                          style:
                              Theme.of(context).textTheme.bodyMedium!.copyWith(
                                    fontSize: 12,
                                  ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
                onChanged: onChanged,
                style: const TextStyle(color: Colors.black),
                hint: Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Text(
                    hintMessage,
                    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: 6,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 10),
                          child: Text(
                            selectedValue != null
                                ? spaces
                                    .firstWhere((e) => e.uuid == selectedValue)
                                    .name
                                : hintMessage,
                            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[200],
                            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),
                  ),
                ),
                menuItemStyleData: const MenuItemStyleData(
                  height: 60,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}