import 'package:mc_common_app/view_models/requests_view_model.dart';
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/models/general/widgets_models.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/views/advertisement/ad_creation_steps/ad_creation_steps_containers.dart';
import 'package:mc_common_app/views/advertisement/picked_images_container.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.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';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(
        title: "Create Request",
      ),
      body: Consumer<RequestsVM>(builder: (context, requestsVM, widget) {
        return Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    "Vehicle Detail".toText(fontSize: 18, isBold: true),
                    8.height,
                    if (requestsVM.isFetchingRequestType) ...[
                      const Center(
                        child: CircularProgressIndicator(),
                      ),
                    ] else ...[
                      Builder(builder: (context) {
                        List<DropValue> requestTypeDrop = [];
                        for (var element in requestsVM.myRequestsTypeEnum) {
                          requestTypeDrop.add(DropValue(element.enumValue.toInt() ?? 0, element.enumValueStr ?? "", ""));
                        }
                        return DropdownField(
                          (DropValue value) => requestsVM.updateSelectionRequestTypeId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                          list: requestTypeDrop,
                          dropdownValue: requestsVM.requestTypeId.selectedId != -1 ? DropValue(requestsVM.requestTypeId.selectedId, requestsVM.requestTypeId.selectedOption, "") : null,
                          hint: "Request Type",
                          errorValue: requestsVM.requestTypeId.errorValue,
                        );
                      }),
                    ],
                    8.height,
                    if (requestsVM.requestTypeId.selectedId != -1)
                      if (requestsVM.isFetchingVehicleType) ...[
                        const Center(
                          child: CircularProgressIndicator(),
                        ),
                      ] else ...[
                        Builder(builder: (context) {
                          List<DropValue> vehicleTypeDrop = [];
                          for (var element in requestsVM.vehicleTypes) {
                            vehicleTypeDrop.add(DropValue(element.id?.toInt() ?? 0, element.vehicleTypeName ?? "", ""));
                          }
                          return DropdownField(
                            (DropValue value) => requestsVM.updateSelectionVehicleTypeId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                            list: vehicleTypeDrop,
                            dropdownValue: requestsVM.vehicleTypeId.selectedId != -1 ? DropValue(requestsVM.vehicleTypeId.selectedId, requestsVM.vehicleTypeId.selectedOption, "") : null,
                            hint: "Vehicle Type",
                            errorValue: requestsVM.vehicleTypeId.errorValue,
                          );
                        }),
                      ],
                    8.height,
                    if (requestsVM.vehicleTypeId.selectedId != -1)
                      if (requestsVM.isFetchingVehicleDetail) ...[
                        const Center(
                          child: CircularProgressIndicator(),
                        ),
                      ] else ...[
                        Column(
                          children: [
                            Builder(builder: (context) {
                              List<DropValue> vehicleBrandsDrop = [];
                              for (var element in requestsVM.vehicleBrands) {
                                vehicleBrandsDrop.add(DropValue(element.id?.toInt() ?? 0, element.vehicleBrandDescription ?? "", ""));
                              }
                              return DropdownField(
                                (DropValue value) => requestsVM.updateSelectionVehicleBrandId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                                list: vehicleBrandsDrop,
                                dropdownValue: requestsVM.vehicleBrandId.selectedId != -1 ? DropValue(requestsVM.vehicleBrandId.selectedId, requestsVM.vehicleBrandId.selectedOption, "") : null,
                                hint: "Brand",
                                errorValue: requestsVM.vehicleBrandId.errorValue,
                              );
                            }),
                            8.height,
                            Builder(builder: (context) {
                              List<DropValue> vehicleModelsDrop = [];
                              for (var element in requestsVM.vehicleModels) {
                                if (requestsVM.vehicleBrandId.selectedId == element.vehicleBrandID) vehicleModelsDrop.add(DropValue(element.id?.toInt() ?? 0, element.model ?? "", ""));
                              }
                              return DropdownField(
                                (DropValue value) => requestsVM.updateSelectionVehicleModelId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                                list: vehicleModelsDrop,
                                dropdownValue: requestsVM.vehicleModelId.selectedId != -1 ? DropValue(requestsVM.vehicleModelId.selectedId, requestsVM.vehicleModelId.selectedOption, "") : null,
                                hint: "Model",
                                errorValue: requestsVM.vehicleModelId.errorValue,
                              );
                            }),
                            8.height,
                            Builder(builder: (context) {
                              List<DropValue> vehicleYearModelsDrop = [];
                              for (var element in requestsVM.vehicleModelYears) {
                                vehicleYearModelsDrop.add(DropValue(element.id?.toInt() ?? 0, element.modelYear ?? "", ""));
                              }

                              return DropdownField(
                                (DropValue value) => requestsVM.updateSelectionVehicleModelYearId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                                list: vehicleYearModelsDrop,
                                dropdownValue:
                                    requestsVM.vehicleModelYearId.selectedId != -1 ? DropValue(requestsVM.vehicleModelYearId.selectedId, requestsVM.vehicleModelYearId.selectedOption, "") : null,
                                hint: "Year",
                                errorValue: requestsVM.vehicleModelYearId.errorValue,
                              );
                            }),
                            8.height,
                            Builder(builder: (context) {
                              List<DropValue> vehicleCountriesDrop = [];
                              for (var element in requestsVM.vehicleCountries) {
                                vehicleCountriesDrop.add(DropValue(element.id?.toInt() ?? 0, element.countryName ?? "", ""));
                              }
                              return DropdownField(
                                (DropValue value) => requestsVM.updateSelectionVehicleCountryId(SelectionModel(selectedOption: value.value, selectedId: value.id)),
                                list: vehicleCountriesDrop,
                                dropdownValue: requestsVM.vehicleCountryId.selectedId != -1 ? DropValue(requestsVM.vehicleCountryId.selectedId, requestsVM.vehicleCountryId.selectedOption, "") : null,
                                hint: "Country",
                                errorValue: requestsVM.vehicleCountryId.errorValue,
                              );
                            }),
                            if (requestsVM.vehicleCountryId.selectedId != -1) ...[
                              if (requestsVM.isCountryFetching) ...[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [const CircularProgressIndicator().paddingAll(10)],
                                ),
                              ] else ...[
                                8.height,
                                Builder(builder: (context) {
                                  List<DropValue> vehicleCitiesDrop = [];
                                  for (var element in requestsVM.vehicleCities) {
                                    vehicleCitiesDrop.add(DropValue(element.id?.toInt() ?? 0, element.cityName ?? "", ""));
                                  }
                                  return DropdownField(
                                    (DropValue value) => requestsVM.updateSelectionVehicleCityId(SelectionModel(selectedId: value.id, selectedOption: value.value)),
                                    list: vehicleCitiesDrop,
                                    dropdownValue: requestsVM.vehicleCityId.selectedId != -1 ? DropValue(requestsVM.vehicleCityId.selectedId, requestsVM.vehicleCityId.selectedOption, "") : null,
                                    hint: "City",
                                    errorValue: requestsVM.vehicleCityId.errorValue,
                                  );
                                }),
                              ],
                            ],
                            8.height,
                            TxtField(
                              hint: "Price",
                              value: requestsVM.price,
                              onChanged: (e) => requestsVM.updatePrice(e),
                            ),
                            8.height,
                            TxtField(
                              hint: "Description",
                              maxLines: 5,
                              value: requestsVM.description,
                              onChanged: (e) => requestsVM.updateDescription(e),
                            ),
                            8.height,
                            DottedRectContainer(
                              onTap: () => context.read<RequestsVM>().pickMultipleImages(),
                              text: "Attach Image",
                              icon: MyAssets.attachmentIcon.buildSvg(),
                            ),
                            if (requestsVM.vehicleImageError != "") ...[
                              10.height,
                              Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  requestsVM.vehicleImageError.toText(fontSize: 14, color: Colors.red),
                                ],
                              ).paddingOnly(right: 10)
                            ],
                            if (requestsVM.pickedVehicleImages.isNotEmpty) ...[
                              16.height,
                              PickedImagesContainer(
                                pickedImages: requestsVM.pickedVehicleImages,
                                onCrossPressedPrimary: requestsVM.removeImageFromList,
                                onAddImagePressed: () {
                                  context.read<RequestsVM>().pickMultipleImages();
                                },
                              ),
                            ],
                            16.height,
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Checkbox(
                                  value: requestsVM.isShippingDeliveryEnabled,
                                  onChanged: null,
                                ),
                                "Shipping/Delivery".toText(color: MyColors.darkPrimaryColor, isBold: true, fontSize: 18)
                              ],
                            ).onPress(() {
                              requestsVM.updateShippingDeliverEnabled(!requestsVM.isShippingDeliveryEnabled);
                            }),
                          ],
                        ),
                      ]
                  ],
                ).toContainer(isShadowEnabled: true, marginAll: 16, paddingAll: 12),
              ),
            ),
            ShowFillButton(
              title: "Create Request",
              maxWidth: double.infinity,
              margin: const EdgeInsets.all(16),
              onPressed: () async {
                await context.read<RequestsVM>().onCreateRequestTapped(context);
              },
            )
          ],
        );
      }),
    );
  }
}