import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.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/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/general_models/widgets_models.dart';
import 'package:mc_common_app/models/services_models/item_model.dart';
import 'package:mc_common_app/models/services_models/service_model.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/common_widgets/app_bar.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:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CustomAppBar(
          title: LocaleKeys.bookAppointment.tr(),
          isRemoveBackButton: false,
          isDrawerEnabled: false,
          onBackButtonTapped: () {
            context.read<AppointmentsVM>().resetAfterBookingAppointment();
            Navigator.pop(context);
          },
        ),
        body: Consumer(
          builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                21.height,
                CustomAddButton(
                  needsBorder: true,
                  bgColor: MyColors.white,
                  onTap: () => appointmentsVM.openTheAddServiceBottomSheet(context, appointmentsVM),
                  text: LocaleKeys.addServices.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(),
                10.height,
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: appointmentsVM.servicesInCurrentAppointment.length,
                  itemBuilder: (BuildContext context, int serviceIndex) {
                    ServiceModel serviceData = appointmentsVM.servicesInCurrentAppointment[serviceIndex];
                    return Column(
                      children: [
                        Row(
                          children: [
                            Expanded(child: (serviceData.serviceDescription ?? "").toText(fontSize: 15, isBold: true)),
                            Row(
                              children: [
                                MyAssets.icEdit.buildSvg(height: 17, width: 17).onPress(() {
                                  appointmentsVM.updateBranchServiceId(
                                    SelectionModel(
                                      selectedId: serviceData.serviceProviderServiceId!,
                                      selectedOption: serviceData.serviceDescription ?? "",
                                      itemPrice: "",
                                    ),
                                  );
                                  appointmentsVM.getServiceItems(serviceId: serviceData.serviceProviderServiceId!);
                                  navigateWithName(context, AppRoutes.bookAppointmentsItemView);
                                }),
                                10.width,
                                MyAssets.closeWithOrangeBg.buildSvg(height: 30, width: 30).onPress(() => appointmentsVM.removeServiceInCurrentAppointment(serviceIndex)),
                              ],
                            ),
                          ],
                        ),
                        if (true) ...[
                          Column(
                            children: List.generate(serviceData.serviceItems!.length, (itemIndex) {
                              ItemData itemData = serviceData.serviceItems![itemIndex];
                              return Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  "${itemData.name}: ".toText(fontSize: 13, color: MyColors.lightTextColor),
                                  ("${itemData.price}").toText(fontSize: 13, isBold: true).expand(),
                                ],
                              );
                            }),
                          ),
                          // 8.height,
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              (LocaleKeys.serviceLocation.tr()).toText(fontSize: 12, color: MyColors.lightTextColor),
                              4.width,
                              (serviceData.isHomeSelected ? serviceData.servicelocationInfo.address : LocaleKeys.workshop.tr()).toText(fontSize: 12, isBold: true).expand(),
                            ],
                          ),
                          5.height,
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              if (serviceData.isHomeSelected) ...[
                                ((serviceData.currentTotalServicePrice + (serviceData.servicelocationInfo.distanceToBranch * double.parse(serviceData.rangePricePerKm!))).toStringAsFixed(2))
                                    .toText(fontSize: 32, isBold: true),
                              ] else ...[
                                ((serviceData.currentTotalServicePrice).toString()).toText(fontSize: 32, isBold: true),
                              ],
                              2.width,
                              LocaleKeys.sar.tr().toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5),
                              const Icon(Icons.arrow_drop_down, size: 30)
                            ],
                          ).onPress(() => appointmentsVM.priceBreakDownClicked(context, serviceData)),
                        ],
                      ],
                    ).toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 10));
                  },
                ).expand(),
                Row(
                  children: [
                    Expanded(
                      child: ShowFillButton(
                        txtColor: MyColors.black,
                        maxHeight: 55,
                        title: LocaleKeys.cancel.tr(),
                        onPressed: () {
                          appointmentsVM.resetAfterBookingAppointment();
                          Navigator.pop(context);
                        },
                        backgroundColor: MyColors.greyButtonColor,
                      ),
                    ),
                    12.width,
                    Expanded(
                      child: ShowFillButton(
                        maxHeight: 55,
                        title: LocaleKeys.next.tr(),
                        onPressed: () {
                          appointmentsVM.onServicesNextPressed(context);
                        },
                        backgroundColor: MyColors.darkPrimaryColor,
                      ),
                    )
                  ],
                ).paddingAll(21)
              ],
            );
          },
        ));
  }
}
