import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';

class ItemSelectForm {
  final String key;
  final String text;
  final String? description;
  final bool isOther;
  final String image;

  ItemSelectForm(
    this.key,
    this.text, {
    this.isOther = false,
    this.image = "",
    this.description,
  });
}

class SelectFormView extends StatelessWidget {
  final String name;
  final String? hintText;
  final TextStyle? hintTextStyle;
  final TextEditingController? ctrl;
  final Widget? bottomSheetTitle;
  final List<ItemSelectForm> listItem;
  final ValueChanged<String> onSelect;
  final FormFieldValidator<String>? validator;
  final _borderRadius = const Radius.circular(24);
  final bool? enabled;
  const SelectFormView(
      {Key? key,
      required this.name,
      this.hintText,
      this.hintTextStyle,
      this.ctrl,
      this.bottomSheetTitle,
      required this.listItem,
      required this.onSelect,
      this.validator,
      this.enabled})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    bottomSheet() {
      showModalBottomSheet<void>(
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: _borderRadius,
            topRight: _borderRadius,
          ),
        ),
        builder: (BuildContext context) {
          ItemSelectForm? selectedForm;
          String? selectedKey;
          if (listItem.isNotEmpty) {
            var res = listItem.where((element) => element.key == selectedKey);
            if (res.isNotEmpty) {
              selectedForm = res.first;
            }
          }
          return StatefulBuilder(builder: (
            BuildContext context,
            StateSetter stateSetter,
          ) {
            return Container(
              height: SizeConfig.height * .45,
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  bottomSheetTitle ?? Container(),
                  // const SizedBox(height: 16),
                  Expanded(
                    child: SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: Column(
                        children: [
                          ...listItem.map(
                            (e) => Card(
                              elevation: 0,
                              color: Colors.transparent,
                              shape: const RoundedRectangleBorder(
                                side: BorderSide(
                                  color: ColorPalette.greyBorder,
                                ),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(12)),
                              ),
                              child: ListTile(
                                title: Text(
                                  e.text,
                                  style: const TextStyle(
                                    fontSize: 14,
                                  ),
                                ),
                                subtitle: e.description != null
                                    ? Text(
                                        e.description!,
                                        maxLines: 2,
                                        overflow: TextOverflow.ellipsis,
                                      )
                                    : null,
                                // trailing: const Icon(
                                //   Icons.check_circle,
                                //   color: ColorPalette.primary,
                                // ),
                                trailing: Radio(
                                  focusColor: ColorPalette.primary,
                                  activeColor: ColorPalette.primary,
                                  visualDensity: const VisualDensity(
                                    horizontal: VisualDensity.minimumDensity,
                                    vertical: VisualDensity.minimumDensity,
                                  ),
                                  materialTapTargetSize:
                                      MaterialTapTargetSize.shrinkWrap,
                                  value: e.key,
                                  groupValue: selectedKey,
                                  onChanged: (value) {
                                    // selectedForm =
                                    //     ItemSelectForm(e.key, e.text);
                                    // stateSetter(() {
                                    //   selectedKey = selectedForm!.key;
                                    // });
                                  },
                                ),
                                onTap: () {
                                  ctrl?.text = e.text;
                                  onSelect(e.key);
                                  Navigator.of(context).pop();
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  ButtonView(
                    name: 'Select',
                    marginVertical: 4.0,
                    onPressed: () {
                      // print('object $')
                    },
                  )
                ],
              ),
            );
          });
        },
      );
    }

    return TextFormView(
      name: name,
      readOnly: true,
      enabled: enabled ?? true,
      onTap: () {
        if (listItem.isNotEmpty) bottomSheet();
      },
      validator: validator,
      hintText: hintText,
      hintTextStyle: hintTextStyle,
      ctrl: ctrl,
      suffixIcon: Icon(
        Icons.keyboard_arrow_down,
        size: SizeConfig.width * .07,
      ),
    );
  }
}
