import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/view_models/appointments_view_model.dart';
import 'package:mc_common_app/view_models/dashboard_view_model_customer.dart';
import 'package:mc_common_app/views/appointments/widgets/common_appointment_slider_widget.dart';
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/appointments_models/appointment_list_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/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/common_widgets/filters_list.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class AppointmentsFragment extends StatelessWidget {
  const AppointmentsFragment({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) {
        return Scaffold(
          appBar: CustomAppBar(
            title: LocaleKeys.appointments.tr(),
            isRemoveBackButton: true,
            actions: [
              Padding(
                padding: EdgeInsets.only(top: appointmentsVM.appointmentFiltersCounter > 0 ? 20 : 0, right: 21),
                child: Badge(
                  isLabelVisible: appointmentsVM.appointmentFiltersCounter > 0,
                  largeSize: 15,
                  smallSize: 20,
                  backgroundColor: MyColors.darkPrimaryColor,
                  label: Text('${appointmentsVM.appointmentFiltersCounter}'),
                  child: MyAssets.searchIcon.buildSvg(),
                ),
              ).onPress(() {
                navigateWithName(context, AppRoutes.appoinmentSearchFilterPage);
              })
            ],
          ).toViewOnly(context, onTap: () {
            navigateWithName(context, AppRoutes.loginWithPassword);
          }),
          body: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Column(
              children: [
                16.height,
                FiltersList(
                    filterList: appointmentsVM.appointmentsFilterOptions,
                    onFilterTapped: (index, selectedFilterId) {
                      appointmentsVM.applyFilterOnAppointmentsVMForCustomers(appointmentStatusEnum: selectedFilterId.toAppointmentStatusEnum());
                    }),
                16.height,
                Expanded(
                  child: RefreshIndicator(
                    onRefresh: () async {
                      int index = appointmentsVM.appointmentsFilterOptions.indexWhere((element) => element.isSelected);
                      if (index != -1) {
                        AppointmentStatusEnum appointmentStatusEnum = appointmentsVM.appointmentsFilterOptions[index].id.toAppointmentStatusEnum();
                        appointmentsVM.applyFilterOnAppointmentsVMForCustomers(appointmentStatusEnum: appointmentStatusEnum);
                      }
                    },
                    child: appointmentsVM.state == ViewState.busy
                        ? const Center(child: CircularProgressIndicator())
                        : appointmentsVM.myFilteredAppointmentsForCustomers.isEmpty
                            ? Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  LocaleKeys.noAppointmentstoShow.tr().toText(fontSize: 16, color: MyColors.lightTextColor),
                                  if (appointmentsVM.appointmentFiltersCounter > 0) ...[
                                    8.height,
                                    InkWell(
                                      onTap: () async {
                                        appointmentsVM.clearAppointmentFilters();
                                        await appointmentsVM.applyFilterOnAppointmentsVMForCustomers(appointmentStatusEnum: AppointmentStatusEnum.allAppointments);
                                      },
                                      child: LocaleKeys.clearFilters.tr().toText(
                                            fontSize: 14,
                                            isBold: true,
                                            color: MyColors.darkPrimaryColor,
                                          ),
                                    ),
                                  ],
                                ],
                              )
                            : ListView.separated(
                                separatorBuilder: (context, index) => 12.height,
                                shrinkWrap: true,
                                itemCount: appointmentsVM.myFilteredAppointmentsForCustomers.length,
                                itemBuilder: (BuildContext context, int index) {
                                  return AppointmentFragmentTileWidget(
                                    onTapped: () {
                                      AppointmentListModel appointmentModel = appointmentsVM.myFilteredAppointmentsForCustomers[index];
                                      appointmentModel.appointmentServicesList!.forEach((service) {
                                        double totalServicePrice = 0.0;
                                        service.serviceItems!.forEach((item) {
                                          totalServicePrice = totalServicePrice + (double.parse("${item.price ?? 0.0}"));
                                        });
                                        service.currentTotalServicePrice = totalServicePrice;
                                      });
                                      navigateWithName(context, AppRoutes.appointmentDetailView, arguments: appointmentModel);
                                    },
                                    appointmentListModel: appointmentsVM.myFilteredAppointmentsForCustomers[index],
                                  ).margin(left: 21, right: 21);
                                },
                              ),
                  ),
                ).toViewOnly(context, onTap: () {
                  navigateWithName(context, AppRoutes.loginWithPassword);
                }),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              context.read<DashboardVmCustomer>().onNavbarTapped(0);
            },
            backgroundColor: MyColors.darkPrimaryColor,
            child: Icon(
              Icons.add,
              color: MyColors.white,
            ),
          ).toViewOnly(context, onTap: () {
            navigateWithName(context, AppRoutes.loginWithPassword);
          }),
        );
      },
    );
  }
}