import 'dart:developer';

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/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/services_models/item_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/enums.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/views/appointments/widgets/service_item_with_price_checkbox.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 BookAppointmentsItemView extends StatelessWidget {
  const BookAppointmentsItemView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CustomAppBar(
          title: LocaleKeys.selectItems.tr(),
          isRemoveBackButton: false,
          isDrawerEnabled: false,
          actions: [MyAssets.searchIcon.buildSvg().paddingOnly(right: 21)],
          onBackButtonTapped: () {
            context.read<AppointmentsVM>().resetCategorySelectionBottomSheet();
            Navigator.pop(context);
          },
        ),
        body: Consumer(
          builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 40,
                  width: double.infinity,
                  color: MyColors.darkTextColor,
                  alignment: Alignment.centerLeft,
                  child: ("${appointmentsVM.selectedSubServicesCounter} ${LocaleKeys.itemsSelected.tr()}").toText(fontSize: 16, color: MyColors.white).horPaddingMain(),
                ),
                16.height,
                Column(
                  children: [
                    LocaleKeys.workshopFullAccessServices.tr().toText(fontSize: 12, isItalic: true, color: MyColors.lightTextColor),
                    8.height,
                    // Row(
                    //   crossAxisAlignment: CrossAxisAlignment.start,
                    //   children: [
                    //     LocaleKeys.changeLocationService.tr().toText(fontSize: 14, isBold: true),
                    //     5.width,
                    //     LocaleKeys.edit.tr().toText(fontSize: 14, isBold: true, isUnderLine: true, color: MyColors.adPendingStatusColor),
                    //     5.width,
                    //     MyAssets.icEdit.buildSvg(width: 17),
                    //   ],
                    // ).onPress(() {}),
                    16.height,
                    const Divider(),
                  ],
                ).horPaddingMain(),
                appointmentsVM.state == ViewState.busy
                    ? const Expanded(child: Center(child: CircularProgressIndicator()))
                    : appointmentsVM.serviceItemsFromApi.isEmpty
                        ? Expanded(child: Center(child: LocaleKeys.noAvailableItems.tr().toText(fontSize: 16, color: MyColors.lightTextColor)))
                        : ListView.separated(
                            separatorBuilder: (BuildContext context, int index) => const Divider(),
                            itemCount: appointmentsVM.serviceItemsFromApi.length,
                            itemBuilder: (BuildContext context, int index) {
                              ItemData itemData = appointmentsVM.serviceItemsFromApi[index];
                              return ServiceItemWithPriceCheckBox(
                                description: itemData.description ?? LocaleKeys.someDescriptionSubServices.tr(),
                                title: itemData.name!,
                                isSelected: itemData.isUpdateOrSelected!,
                                onSelection: (bool value) {
                                  appointmentsVM.onItemUpdateOrSelected(index, !itemData.isUpdateOrSelected!, itemData.id!);
                                },
                                priceWidget: Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    itemData.price!.split(".").first.toText(fontSize: 30, isBold: true),
                                    LocaleKeys.sar.tr().toText(fontSize: 15, isBold: true, color: MyColors.lightTextColor).paddingOnly(bottom: 5),
                                  ],
                                ),
                              );
                            },
                          ).expand(),
                Column(
                  children: [
                    const Divider(height: 1, thickness: 0.7),
                    8.height,
                    if (appointmentsVM.selectSubServicesError != "")
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          appointmentsVM.selectSubServicesError.toText(fontSize: 14, color: Colors.red),
                        ],
                      ).paddingOnly(right: 10),
                    8.height,
                    Row(
                      children: [
                        Expanded(
                          child: ShowFillButton(
                            txtColor: MyColors.black,
                            maxHeight: 55,
                            title: LocaleKeys.cancel.tr(),
                            onPressed: () {
                              appointmentsVM.resetCategorySelectionBottomSheet();
                              pop(context);
                            },
                            backgroundColor: MyColors.greyButtonColor,
                          ),
                        ),
                        12.width,
                        Expanded(
                          child: Builder(
                            builder: (BuildContext context) {
                              return ShowFillButton(
                                maxHeight: 55,
                                title: LocaleKeys.next.tr(),
                                onPressed: () async {
                                  bool resp = appointmentsVM.validateItemsSelection();
                                  if (resp) {
                                    appointmentsVM.onItemsSelectedInService();
                                    Navigator.pop(context);
                                  }
                                  // bool resp = appointmentsVM.validateItemsSelection();
                                  // if (resp) {
                                  //   Utils.showLoading(context);
                                  //   await appointmentsVM.mergeServiceIntoAvailableSchedules();
                                  //   appointmentsVM.resetCategorySelectionBottomSheet();
                                  //   Utils.hideLoading(context);
                                  //   Navigator.of(context).pushReplacementNamed(AppRoutes.bookAppointmenServicesView);
                                  // }
                                },
                                backgroundColor: !appointmentsVM.isServiceSelectionValidated() ? MyColors.lightTextColor.withOpacity(0.6) : MyColors.darkPrimaryColor,
                              );
                            },
                          ),
                        ),
                      ],
                    ).horPaddingMain(),
                    16.height,
                  ],
                ),
              ],
            );
          },
        ));
  }
}
