import 'package:car_provider_app/config/provider_routes.dart';
import 'package:car_provider_app/views/dashboard/widget/appointment_slider_widget.dart';
import 'package:mc_common_app/classes/app_state.dart';
import 'package:mc_common_app/config/dependencies.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/date_helper.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/utils/utils.dart';
import 'package:mc_common_app/view_models/appointments_view_model.dart';
import 'package:mc_common_app/views/appointments/widgets/customer_appointment_slider_widget.dart';
import 'package:mc_common_app/widgets/common_widgets/categories_list.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:mc_common_app/widgets/tab/menu_tabs.dart';
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/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:provider/provider.dart';

class AppointmentFragment extends StatelessWidget {
  String date = "";
  VoidCallback onBackButtonTapped;

  AppointmentFragment({Key? key, required this.onBackButtonTapped})
      : super(key: key);

  GlobalKey<RefreshIndicatorState> refreshIndicatorKey =
      GlobalKey<RefreshIndicatorState>();

  Future<void> _pullRefresh(BuildContext context) async {
    await context.read<AppointmentsVM>().getProviderMyAppointments({
      "ServiceProviderID": injector
              .get<AppState>()
              .getUser
              .data
              ?.userInfo
              ?.providerId
              .toString() ??
          "0"
    });
  }

  @override
  Widget build(BuildContext context) {
    context.read<AppointmentsVM>().setupProviderAppointmentFilter();
    date = DateHelper.formatAsDayMonthYear(DateTime.now());
    return Scaffold(
      appBar: CustomAppBar(
        profileImageUrl: MyAssets.carBanner,
        title: "Appointments",
        onBackButtonTapped: onBackButtonTapped,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.search),
          ),
          10.width,
        ],
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Consumer(builder: (BuildContext context,
            AppointmentsVM appointmentsVM, Widget? child) {
          return RefreshIndicator(
            onRefresh: () => _pullRefresh(context),
            key: refreshIndicatorKey,
            child: SingleChildScrollView(
              physics: const AlwaysScrollableScrollPhysics(),
              child: Column(
                children: [
                  progressWidget(context),
                  FiltersList(
                    filterList: appointmentsVM.appointmentsFilterOptions,
                    padding: const EdgeInsets.symmetric(horizontal: 18),
                    onFilterTapped: (index, selectedFilterId) {
                      appointmentsVM.applyFilterOnAppointmentsVM(
                        appointmentStatusEnum:
                            selectedFilterId.toAppointmentStatusEnum(),
                      );
                    },
                  ),
                  ListView.separated(
                    itemBuilder: (context, index) {
                      return AppointmentSliderWidget(
                        appointmentListModel:
                            appointmentsVM.myFilteredAppointments2[index],
                        isNeedTotalPayment: false,
                        onTap: () {

                          navigateWithName(
                            context,
                            ProviderAppRoutes.appointmentDetailList,
                            arguments: appointmentsVM
                                .myFilteredAppointments2[index]
                                .customerAppointmentList,
                          );
                        },
                      );
                    },
                    separatorBuilder: (context, snapchat) {
                      return 21.height;
                    },
                    itemCount: appointmentsVM.myFilteredAppointments2.length,
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    padding: const EdgeInsets.all(21),
                  ),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }

  Widget progressWidget(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: "Slots Overview".toText(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            Row(
              children: [
                date.toText(
                  fontWeight: FontWeight.bold,
                ),
                const Icon(
                  Icons.keyboard_arrow_down_outlined,
                  size: 16,
                ),
              ],
            )
                .toContainer(
              backgroundColor: MyColors.lightGreyEAColor,
              borderRadius: 100,
              padding: const EdgeInsets.symmetric(
                horizontal: 12,
                vertical: 6,
              ),
            )
                .onPress(() async {
              date = await Utils.pickDateFromDatePicker(
                context,
                firstDate: null,
              );
              context.read<AppointmentsVM>().notifyListeners();
            }),
          ],
        ),
        24.height,
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Container(
                      width: 14,
                      height: 14,
                      color: MyColors.lightGreyEAColor,
                    ),
                    4.width,
                    "Empty: ".toText(
                      fontSize: 8,
                      color: Colors.white,
                    ),
                    "8".toText(
                      fontSize: 9,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ],
                ).toContainer(
                  backgroundColor: MyColors.darkIconColor,
                ),
                8.height,
                Row(
                  children: [
                    Container(
                      width: 14,
                      height: 14,
                      color: MyColors.darkPrimaryColor,
                    ),
                    4.width,
                    "Occupied: ".toText(
                      fontSize: 8,
                      color: Colors.white,
                    ),
                    "54".toText(
                      fontSize: 9,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ],
                ).toContainer(
                  backgroundColor: MyColors.darkIconColor,
                ),
              ],
            ),
            CircularPercentIndicator(
              radius: 60.0,
              lineWidth: 12.0,
              percent: 0.7,
              circularStrokeCap: CircularStrokeCap.round,
              center: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  "Total Slots".toText(
                    fontSize: 13,
                    fontWeight: FontWeight.bold,
                  ),
                  "24".toText(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ],
              ),
              backgroundColor: MyColors.lightGreyEAColor,
              progressColor: MyColors.darkPrimaryColor,
            ),
          ],
        )
      ],
    ).toWhiteContainer(
      width: double.infinity,
      pading: const EdgeInsets.all(12),
      margin: const EdgeInsets.all(21),
    );
  }
}