import 'package:flutter/material.dart';
import 'package:mc_common_app/config/routes.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_models/widgets_models.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/view_models/appointments_view_model.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.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 AppointmentServicePickBottomSheet extends StatelessWidget {
  const AppointmentServicePickBottomSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    AppointmentsVM appointmentsVM = context.watch<AppointmentsVM>();
    return SizedBox(
        height: MediaQuery.of(context).size.height * 0.85,
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.all(8),
              height: 8,
              width: 60,
              decoration: const BoxDecoration(color: MyColors.lightTextColor, borderRadius: BorderRadius.all(Radius.circular(20))),
            ),
            12.height,
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                "Select Category".toText(fontSize: 24, isBold: true),
              ],
            ),
            30.height,
            Expanded(
              child: ListView(
                children: [
                  Builder(
                    builder: (context) {
                      return DropdownField(
                        (DropValue value) => appointmentsVM.updateProviderCategoryId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)),
                        list: appointmentsVM.branchCategories,
                        hint: "Select Category",
                        dropdownValue: appointmentsVM.branchSelectedCategoryId.selectedId != -1
                            ? DropValue(appointmentsVM.branchSelectedCategoryId.selectedId, appointmentsVM.branchSelectedCategoryId.selectedOption, "")
                            : null,
                      );
                    },
                  ),
                  if (appointmentsVM.isFetchingServices) ...[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [const CircularProgressIndicator().paddingAll(10)],
                    ),
                  ] else if (appointmentsVM.branchServices.isNotEmpty) ...[
                    8.height,
                    Builder(
                      builder: (context) {
                        List<DropValue> serviceCategories = [];
                        for (var element in appointmentsVM.branchServices) {
                          if (element.categoryId == appointmentsVM.branchSelectedCategoryId.selectedId) {
                            serviceCategories.add(DropValue(
                              element.serviceProviderServiceId ?? 0,
                              element.serviceDescription!,
                              "",
                            ));
                          }
                        }

                        return DropdownField(
                          (DropValue value) => appointmentsVM.updateBranchServiceId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)),
                          list: serviceCategories,
                          hint: "Select Service",
                          dropdownValue: appointmentsVM.branchSelectedServiceId.selectedId != -1
                              ? DropValue(appointmentsVM.branchSelectedServiceId.selectedId, appointmentsVM.branchSelectedServiceId.selectedOption, "")
                              : null,
                        );
                      },
                    ),
                  ],
                  if (appointmentsVM.branchSelectedServiceId.selectedId != -1 && !appointmentsVM.isFetchingServices) ...[
                    16.height,
                    Row(
                      children: [
                        "Select Service Location".toText(
                          fontSize: 16,
                          isBold: true,
                          color: MyColors.black,
                        ),
                      ],
                    ),
                    8.height,
                    Row(
                      children: [
                        Expanded(
                          child: ShowFillButton(
                            isFilled: appointmentsVM.isHomeTapped,
                            maxHeight: 48,
                            title: "Home",
                            txtColor: appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor,
                            onPressed: () => appointmentsVM.updateIsHomeTapped(true),
                          ),
                        ),
                        12.width,
                        Expanded(
                          child: ShowFillButton(
                            isFilled: !appointmentsVM.isHomeTapped,
                            txtColor: !appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor,
                            maxHeight: 48,
                            title: "Workshop",
                            onPressed: () => appointmentsVM.updateIsHomeTapped(false),
                          ),
                        ),
                      ],
                    ),
                    if (appointmentsVM.isHomeTapped) ...[
                      8.height,
                      TxtField(
                        hint: 'Pick Home Location',
                        errorValue: appointmentsVM.pickHomeLocationError,
                        value: appointmentsVM.pickedHomeLocation,
                        isNeedClickAll: true,
                        postfixData: Icons.location_on,
                        postFixDataColor: MyColors.darkTextColor,
                        onTap: () {
                          //TODO: open the place picked to pick the location and save it in provider.
                          appointmentsVM.updatePickedHomeLocation("PM58+F97, Al Olaya, Riyadh 12333");
                        },
                      ),
                      14.height,
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          const Icon(
                            Icons.warning,
                            color: MyColors.adPendingStatusColor,
                            size: 19,
                          ).paddingOnly(bottom: 2),
                          3.width,
                          "Some services are not available on home location.".toText(
                            color: MyColors.adPendingStatusColor,
                            fontSize: 12,
                            isItalic: true,
                          ),
                        ],
                      ),
                    ]
                  ],
                ],
              ),
            ),
            SizedBox(
              width: double.infinity,
              child: Column(
                children: [
                  if (appointmentsVM.isHomeTapped && !appointmentsVM.isFetchingServices) ...[
                    const Divider(thickness: 1, height: 1),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        // TODO: This Price will be decided according to the service selected, We will calculate the KMs and multiple it with price per KMs
                        150.toString().toText(fontSize: 30, isBold: true),
                        "SAR".toText(fontSize: 15, isBold: true, color: MyColors.lightTextColor).paddingOnly(bottom: 5),
                      ],
                    ),
                    "These charges are additional to the actual service charges. For heavy items the charges may vary.".toText(fontSize: 12, color: MyColors.lightTextColor),
                    22.height,
                  ],
                  SizedBox(
                    width: double.infinity,
                    child: ShowFillButton(
                      maxHeight: 55,
                      backgroundColor: !appointmentsVM.isServiceSelectionValidated() ? MyColors.lightTextColor.withOpacity(0.6) : MyColors.darkPrimaryColor,
                      title: "Next",
                      onPressed: () {
                        bool isValidated = appointmentsVM.isServiceSelectionValidated();
                        if (isValidated) {
                          appointmentsVM.getServiceItems(appointmentsVM.branchSelectedServiceId.selectedId);
                          Navigator.pop(context);
                          navigateWithName(context, AppRoutes.bookAppointmentsItemView);
                        }
                      },
                    ),
                  ),
                ],
              ),
            ).paddingOnly(bottom: 20)
          ],
        )).horPaddingMain();
  }
}
