import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/view_models/ad_view_model.dart';
import 'package:mc_common_app/views/advertisement/bottom_sheets/ad_damage_parts_selection_sheet.dart';
import 'package:mc_common_app/views/advertisement/components/picked_images_container_widget.dart';
import 'package:mc_common_app/widgets/common_widgets/custom_add_button_widget.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:mc_common_app/widgets/txt_field.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class DamageParts extends StatelessWidget {
  const DamageParts({super.key});

  bool getEnabledStatus(bool? isSelected) {
    if (isSelected == null) {
      return true;
    }
    if (isSelected) {
      return false;
    }
    return true;
  }

  void onAddButtonTapped(BuildContext context, AdVM adVM) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        enableDrag: true,
        builder: (BuildContext context) {
          return const AdDamagePartsSelectionSheet();
        });
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (BuildContext context, AdVM adVM, Widget? child) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CustomAddButton(
                needsBorder: true,
                bgColor: MyColors.white,
                onTap: () {
                  onAddButtonTapped(context, adVM);
                },
                text: LocaleKeys.addDamagePart.tr(),
                icon: Container(
                  height: 24,
                  width: 24,
                  decoration: const BoxDecoration(shape: BoxShape.circle, color: MyColors.darkTextColor),
                  child: const Icon(Icons.add, color: MyColors.white),
                )).horPaddingMain(),
            8.height,
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: adVM.vehicleDamageCards.length,
              itemBuilder: (BuildContext context, int index) {
                VehicleDamageCard vehicleDamageCard = adVM.vehicleDamageCards[index];
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        vehicleDamageCard.partSelectedId!.selectedOption.toText(fontSize: 18, isBold: true),
                        Align(
                          alignment: Alignment.topRight,
                          child: MyAssets.closeWithOrangeBg.buildSvg(
                            fit: BoxFit.fill,
                            height: 30,
                            width: 30,
                          ),
                        ).onPress(() => adVM.removeDamagePartCard(index))
                      ],
                    ),
                    3.height,
                    TxtField(
                      isNeedBorder: false,
                      value: vehicleDamageCard.damagePartDescription,
                      hint: LocaleKeys.addCommentsHere.tr(),
                      onChanged: (v) => adVM.updateDamagePartDescription(index, v),
                    ),
                    3.height,

                    // Builder(builder: (context) {
                    //   List<DropValue> vehicleDamagePartsDrop = [];
                    //   for (var element in adVM.vehicleDamageParts) {
                    //     vehicleDamagePartsDrop.add(DropValue(
                    //       element.id?.toInt() ?? 0,
                    //       element.partName ?? "",
                    //       "",
                    //       isEnabled: true,
                    //     ));
                    //   }
                    //   return DropdownField((DropValue value) {
                    //     adVM.updateSelectionVehicleDamagePartId(SelectionModel(selectedOption: value.value, selectedId: value.id), index);
                    //   },
                    //       dropdownValue: adVM.vehicleDamageCards[index].partSelectedId!.selectedId != -1
                    //           ? DropValue(adVM.vehicleDamageCards[index].partSelectedId!.selectedId, adVM.vehicleDamageCards[index].partSelectedId!.selectedOption, "")
                    //           : null,
                    //       list: vehicleDamagePartsDrop,
                    //       hint: "Vehicle Part",
                    //       errorValue: adVM.vehicleDamageCards[index].partSelectedId!.errorValue);
                    // }),
                    // 8.height,
                    // vehicleDamageCard.partImages != null ?
                    PickedFilesContainer(
                      pickedFiles: vehicleDamageCard.partImages ?? [],
                      onCrossPressedSecondary: (imageIndex, filePath) {
                        adVM.removeDamageImageFromCard(imageIndex, filePath, index);
                      },
                      index: index,
                      onAddFilePressed: () {
                        context.read<AdVM>().pickDamagePartImage(index);
                      },
                    ),
                    // : SizedBox(),
                    // vehicleDamageCard.partImages == null || vehicleDamageCard.partImages!.length < 10
                    //     ? DottedRectContainer(
                    //         onTap: () => context.read<AdVM>().pickDamagePartImage(index),
                    //         text: "Add part image",
                    //         icon: MyAssets.attachmentIcon.buildSvg(),
                    //       )
                    //     : SizedBox(),
                    vehicleDamageCard.partImages != null ? 0.height : 8.height,
                    if (vehicleDamageCard.partImageErrorValue != "") ...[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          vehicleDamageCard.partImageErrorValue.toText(fontSize: 14, color: Colors.red),
                        ],
                      ).paddingOnly(right: 10)
                    ],
                  ],
                ).toWhiteContainer(
                  width: double.infinity,
                  allPading: 12,
                  margin: const EdgeInsets.symmetric(
                    horizontal: 21,
                    vertical: 4,
                  ),
                );
              },
            ),
            // DottedRectContainer(
            //   onTap: () => adVM.addNewDamagePartCard(
            //       damageCard: VehicleDamageCard(partImageErrorValue: "", partImages: null, partSelectedId: SelectionModel(selectedOption: "", selectedId: -1, errorValue: ""))),
            //   text: "Add Part",
            //   icon: MyAssets.attachmentIcon.buildSvg(),
            // ).paddingOnly(right: 21, left: 21, top: 10, bottom: 10),
          ],
        );
      },
    );
  }
}
