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';
import 'package:syncrow_web/utils/style.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Space",
            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                  fontWeight: FontWeight.w400,
                  fontSize: 13,
                  color: ColorsManager.blackColor,
                ),
          ),
          const SizedBox(height: 8),
          DropdownButtonFormField<String>(
            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,
            icon: const SizedBox.shrink(),
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            hint: Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Text(
                hintMessage,
                style: Theme.of(context).textTheme.bodySmall!.copyWith(
                      color: ColorsManager.textGray,
                    ),
              ),
            ),
            decoration: inputTextFormDeco().copyWith(
              contentPadding: EdgeInsets.zero,
              suffixIcon: Container(
                width: 70,
                height: 45,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: const BorderRadius.only(
                    bottomRight: Radius.circular(10),
                    topRight: Radius.circular(10),
                  ),
                  border: Border.all(
                    color: ColorsManager.textGray,
                    width: 1.0,
                  ),
                ),
                child: const Icon(
                  Icons.keyboard_arrow_down,
                  color: ColorsManager.textGray,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}