import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/app_state.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/utils/enums.dart';
import 'package:mc_common_app/view_models/ad_view_model.dart';
import 'package:mc_common_app/views/advertisement/components/picked_images_container_widget.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const VehicleDetailsReview().toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 4)),
        const DamagePartsReview(),
        const AdDurationReview().toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 4)),
        const AdContactDetailsReview(),
      ],
    );
  }
}

class SingleDetailWidget extends StatelessWidget {
  final String text;
  final String type;

  const SingleDetailWidget({super.key, required this.text, required this.type});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        (type.isEmpty ? type : "$type:").toText(fontSize: 12, color: MyColors.lightTextColor),
        text.toText(fontSize: 14, color: MyColors.darkTextColor),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    AdVM adVM = context.read<AdVM>();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LocaleKeys.vehicleDetails.tr().toText(fontSize: 18, isBold: true),
        8.height,
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              flex: 7,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SingleDetailWidget(text: adVM.vehicleTypeId.selectedOption, type: LocaleKeys.vehicleType.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleModelYearId.selectedOption, type: LocaleKeys.vehicleYear.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleConditionId.selectedOption, type: LocaleKeys.vehicleCondition.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleMileageId.selectedOption, type: LocaleKeys.vehicleMileage.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleSellerTypeId.selectedOption, type: LocaleKeys.sellerType.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleCityId.selectedOption, type: LocaleKeys.vehicleCity.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleVin, type: LocaleKeys.vehicleVIN.tr()),
                  16.height,
                  SingleDetailWidget(text: ("${adVM.warrantyDuration} ${LocaleKeys.years.tr()}"), type: LocaleKeys.warrantyAvailable.tr()),
                  16.height,
                ],
              ),
            ),
            Expanded(
              flex: 5,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SingleDetailWidget(text: adVM.vehicleModelId.selectedOption, type: LocaleKeys.vehicleModel.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleColorId.selectedOption, type: LocaleKeys.vehicleColor.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleCategoryId.selectedOption, type: LocaleKeys.vehicleCategory.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleTransmissionId.selectedOption, type: LocaleKeys.vehicleTransmission.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleCountryId.selectedOption, type: LocaleKeys.vehicleCountry.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleDemandAmount, type: LocaleKeys.vehicleAmount.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.vehicleTitle, type: LocaleKeys.vehicleTitle.tr()),
                  16.height,
                  SingleDetailWidget(text: adVM.financeAvailableStatus ? "Yes" : "No", type: LocaleKeys.financeAvailable.tr()),
                  16.height,
                ],
              ),
            ),
          ],
        ),
        SingleDetailWidget(text: adVM.vehicleDescription, type: LocaleKeys.description.tr()),
        8.height,
        ("${LocaleKeys.vehiclePictures.tr()}:").toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
        if (adVM.pickedPostingImages.isNotEmpty) ...[
          // 10.height,
          PickedFilesContainer(
            pickedFiles: adVM.pickedPostingImages,
            onCrossPressedPrimary: adVM.removeImageFromList,
            isReview: true,
            onAddFilePressed: () {},
          ),
        ],
      ],
    );
  }
}

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

  Widget buildDamagePartList(AdVM adVM) {
    List<Widget> list = List.generate(
        adVM.vehicleDamageCards.length,
        (index) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                8.height,
                Row(
                  children: [
                    ("${LocaleKeys.vehiclePart.tr()}:").toText(fontSize: 12, color: MyColors.lightTextColor),
                    4.width,
                    (adVM.vehicleDamageCards[index].partSelectedId!.selectedOption ?? "").toText(fontSize: 14, color: MyColors.darkTextColor),
                  ],
                ),
                if (adVM.vehicleDamageCards[index].damagePartDescription != null && adVM.vehicleDamageCards[index].damagePartDescription!.isNotEmpty) ...[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ("${LocaleKeys.comment.tr()}:").toText(fontSize: 12, color: MyColors.lightTextColor),
                      4.width,
                      Flexible(
                        child: (adVM.vehicleDamageCards[index].damagePartDescription ?? "").toText(fontSize: 12, color: MyColors.darkTextColor),
                      ),
                    ],
                  ),
                  5.height,
                ],
                if (adVM.vehicleDamageCards[index].partImages != null && adVM.vehicleDamageCards[index].partImages!.isNotEmpty) ...[
                  ("${LocaleKeys.damagePartPictures.tr()}:").toText(fontSize: 12, color: MyColors.lightTextColor),
                  PickedFilesContainer(
                    pickedFiles: adVM.vehicleDamageCards[index].partImages!,
                    onCrossPressedPrimary: adVM.removeImageFromList,
                    isReview: true,
                    onAddFilePressed: () {},
                  ),
                ],
                if (index != adVM.vehicleDamageCards.length - 1) const Divider(thickness: 2),
              ],
            ));

    return Column(
      children: list,
    );
  }

  @override
  Widget build(BuildContext context) {
    AdVM adVM = context.read<AdVM>();
    if (adVM.vehicleDamageCards.isEmpty) {
      return const SizedBox.shrink();
    }
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        LocaleKeys.vehicleDamagePart.tr().toText(fontSize: 18, isBold: true),
        buildDamagePartList(adVM),
      ],
    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 4));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (BuildContext context, AdVM adVM, Widget? child) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            LocaleKeys.adDuration.tr().toText(fontSize: 18, isBold: true),
            8.height,
            Row(
              children: [
                if (AppState().userType != UserType.providerDealer) ...[
                  Expanded(
                    flex: 7,
                    child: SingleDetailWidget(type: LocaleKeys.duration.tr(), text: adVM.vehicleAdDurationId.selectedOption),
                  ),
                ],
                Expanded(
                  flex: 5,
                  child: SingleDetailWidget(type: LocaleKeys.startDate.tr(), text: adVM.selectionDurationStartDate),
                ),
              ],
            ),
            // 15.height,
            // "Reservable Ad".toText(fontSize: 18, isBold: true),
            // 8.height,
            // Row(
            //   children: [
            //     Expanded(
            //       flex: 7,
            //       child: SingleDetailWidget(type: "Reservable", text: adVM.vehicleAdReservableId.selectedId == 1 ? "Yes" : "No"),
            //     ),
            //     Expanded(
            //       flex: 5,
            //       child: adVM.vehicleAdReservableId.selectedId == 1
            //           ? SingleDetailWidget(type: "Reserve Price", text: adVM.adReserveAmount)
            //           : const SizedBox(),
            //     ),
            //   ],
            // ),
            if (adVM.specialServiceCards.isNotEmpty) ...[
              15.height,
              LocaleKeys.specialServices.tr().toText(fontSize: 18, isBold: true),
              ListView.separated(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                separatorBuilder: (BuildContext context, int index) => const Divider(thickness: 2),
                itemCount: adVM.specialServiceCards.length,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      8.height,

                      Row(
                        children: [
                          Expanded(
                            flex: 7,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SingleDetailWidget(type: LocaleKeys.specialService.tr(), text: adVM.specialServiceCards[index].serviceSelectedId!.selectedOption),
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SingleDetailWidget(type: LocaleKeys.amountVAR.tr(), text: adVM.specialServiceCards[index].serviceSelectedId!.itemPrice),
                              ],
                            ),
                          ),
                        ],
                      ),
                      // if (adVM.specialServiceCards[index].serviceSelectedId!.selectedId == 1 || adVM.specialServiceCards[index].serviceSelectedId!.selectedId == 3) ...[
                      //   Row(
                      //     children: [
                      //       Expanded(
                      //         flex: 7,
                      //         child: Column(
                      //           crossAxisAlignment: CrossAxisAlignment.start,
                      //           children: [
                      //             8.height,
                      //             SingleDetailWidget(type: "Branch Address", text: adVM.specialServiceCards[index].address ?? ""),
                      //           ],
                      //         ),
                      //       ),
                      //       Expanded(
                      //         flex: 5,
                      //         child: Column(
                      //           crossAxisAlignment: CrossAxisAlignment.start,
                      //           children: [
                      //             SingleDetailWidget(type: "Appointment Time", text: "${adVM.specialServiceCards[index].serviceDate ?? ""} - ${adVM.specialServiceCards[index].serviceTime}"),
                      //           ],
                      //         ),
                      //       ),
                      //     ],
                      //   )
                      // ],
                    ],
                  );
                },
              )
            ],
          ],
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    AdVM adVM = context.read<AdVM>();
    return adVM.isPhoneNumberShown
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              LocaleKeys.adContactDetails.tr().toText(fontSize: 18, isBold: true),
              8.height,
              Row(
                children: [
                  Expanded(
                    flex: 7,
                    child: SingleDetailWidget(type: LocaleKeys.phoneNumber.tr(), text: "${adVM.adPhoneNumberDialCode}${adVM.adPhoneNumber}"),
                  ),
                  Expanded(
                    flex: 5,
                    child: SingleDetailWidget(type: LocaleKeys.onWhatsAp.tr(), text: adVM.isNumberOnWhatsApp ? "Yes" : "No"),
                  ),
                ],
              ),
            ],
          ).toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 4))
        : const SizedBox.shrink();
  }
}
