car_provider_app/lib/views/appoinments/appointment_page.dart

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/models/provider_branches_models/branch_detail_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/date_helper.dart';
import 'package:mc_common_app/utils/enums.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/widgets/common_widgets/categories_list.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.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:percent_indicator/percent_indicator.dart';
import 'package:provider/provider.dart';

class AppointmentPage extends StatelessWidget {
  BranchDetailModel branch;
  String date = "";

  AppointmentPage({
    required this.branch,
    Key? key,
  }) : super(key: key);

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

  Future<void> _pullRefresh(BuildContext context) async {
    await context.read<AppointmentsVM>().getAppointmentSlotsInfo(
          context: context,
          map: {
            "ProviderBranchID": branch.id.toString(),
            "FromDate": date,
            "ToDate": date
          },
          isNeedToRebuild: true,
        );
    await context.read<AppointmentsVM>().getProviderMyAppointments({
      "ServiceProviderID": injector
              .get<AppState>()
              .getUser
              .data
              ?.userInfo
              ?.providerId
              .toString() ??
          "0",
      "ProviderBranchID": branch.id.toString(),
      "FromDate": date,
      "DateTo": date,
    });
  }

  @override
  Widget build(BuildContext context) {
    date = DateHelper.formatAsYearMonthDay(DateTime.now());
    context.read<AppointmentsVM>().setupProviderAppointmentFilter();
    _pullRefresh(context);
    context.read<AppointmentsVM>().selectedBranch = branch.id ?? 0;

    return Scaffold(
      appBar: CustomAppBar(
        profileImageUrl: MyAssets.carBanner,
        title: branch.branchName,
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Consumer(builder: (BuildContext context,
            AppointmentsVM appointmentsVM, Widget? child) {
          if (appointmentsVM.state == ViewState.busy) {
            return const Center(child: CircularProgressIndicator());
          } else {
            return RefreshIndicator(
              onRefresh: () => _pullRefresh(context),
              key: refreshIndicatorKey,
              child: SingleChildScrollView(
                physics: const AlwaysScrollableScrollPhysics(),
                child: Column(
                  children: [
                    progressWidget(context, appointmentsVM),
                    FiltersList(
                      filterList: appointmentsVM.appointmentsFilterOptions,
                      padding: const EdgeInsets.symmetric(horizontal: 18),
                      onFilterTapped: (index, selectedFilterId) {
                        appointmentsVM.applyFilterOnAppointmentsVM(
                          appointmentStatusEnum:
                              selectedFilterId.toAppointmentStatusEnum(),
                          isNeedCustomerFilter: true,
                        );
                      },
                    ),
                    if (appointmentsVM.myFilteredAppointments2.isEmpty)
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 12),
                        child: "No Appointment Found".toText(),
                      ),
                    ListView.separated(
                      itemBuilder: (context, index) {
                        return AppointmentSliderWidget(
                          appointmentListModel:
                              appointmentsVM.myFilteredAppointments2[index],
                          isNeedTotalPayment: false,
                          onTap: () {
                            context
                                .read<AppointmentsVM>()
                                .selectedAppointmentIndex = index;
                            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, AppointmentsVM appointmentsVM) {
    double percent = (appointmentsVM.appointmentSlots?.occupiedSlots ??
                0.0 / (appointmentsVM.appointmentSlots?.totalSlots ?? 0.0))
            .toDouble() *
        100;
    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,
              );
              _pullRefresh(context);
              // 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,
                    ),
                    (appointmentsVM.appointmentSlots?.emptySlots ?? 0)
                        .toString()
                        .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,
                    ),
                    (appointmentsVM.appointmentSlots?.occupiedSlots ?? 0)
                        .toString()
                        .toText(
                          fontSize: 9,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                  ],
                ).toContainer(
                  backgroundColor: MyColors.darkIconColor,
                ),
              ],
            ),
            CircularPercentIndicator(
              radius: 60.0,
              lineWidth: 12.0,
              percent: percent,
              circularStrokeCap: CircularStrokeCap.round,
              center: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  "Total Slots".toText(
                    fontSize: 13,
                    fontWeight: FontWeight.bold,
                  ),
                  (appointmentsVM.appointmentSlots?.totalSlots ?? 0)
                      .toString()
                      .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),
    );
  }
}