import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.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/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/view_models/appointments_view_model.dart';
import 'package:mc_common_app/views/advertisement/custom_add_button.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/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class BookAppointmentServicesView extends StatelessWidget {
  BookAppointmentServicesView({Key? key}) : super(key: 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),
                            ),
                            IconButton(
                              onPressed: () => appointmentsVM
                                  .removeServiceInCurrentAppointment(
                                      serviceIndex),
                              icon: Icon(Icons.delete_outline,
                                  color: MyColors.redColor),
                            )
                          ],
                        ),
                        if (true) ...[
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              (LocaleKeys.serviceLocation.tr()).toText(
                                  fontSize: 12,
                                  color: MyColors.lightTextColor,
                                  isBold: true),
                              (serviceData.isHomeSelected
                                      ? serviceData.homeLocation
                                      : LocaleKeys.workshop.tr())
                                  .toText(fontSize: 12, isBold: true)
                                  .expand(),
                            ],
                          ),
                          5.height,
                          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,
                                      isBold: true),
                                  ("${itemData.price}")
                                      .toText(fontSize: 13, isBold: true)
                                      .expand(),
                                ],
                              );
                            }),
                          ),
                          8.height,
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              ((appointmentsVM
                                          .servicesInCurrentAppointment[
                                              serviceIndex]
                                          .currentTotalServicePrice)
                                      .toString())
                                  .toText(fontSize: 32, isBold: true),
                              2.width,
                              LocaleKeys.sar
                                  .tr()
                                  .toText(
                                      color: MyColors.lightTextColor,
                                      fontSize: 16,
                                      isBold: true)
                                  .paddingOnly(bottom: 5),
                              Icon(Icons.arrow_drop_down, size: 30)
                            ],
                          ).onPress(() => appointmentsVM.priceBreakDownClicked(
                              context,
                              appointmentsVM
                                  .servicesInCurrentAppointment[serviceIndex])),
                        ],
                      ],
                    ).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.servicesInCurrentAppointment.clear();
                          appointmentsVM.allSelectedItemsInAppointments.clear();
                          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)
              ],
            );
          },
        ));
  }
}
