HMG_Patient_App_New/lib/presentation/appointments/my_appointments_page.dart

import 'dart:async';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/book_appointments/book_appointments_view_model.dart';
import 'package:hmg_patient_app_new/features/my_appointments/models/appointemnet_filters.dart';
import 'package:hmg_patient_app_new/features/my_appointments/models/resp_models/patient_appointment_history_response_model.dart';
import 'package:hmg_patient_app_new/features/my_appointments/my_appointments_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/appointments/widgets/AppointmentFilter.dart';
import 'package:hmg_patient_app_new/presentation/appointments/widgets/appointment_card.dart';
import 'package:hmg_patient_app_new/presentation/book_appointment/book_appointment_page.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/custom_tab_bar.dart';
import 'package:hmg_patient_app_new/widgets/date_range_selector/date_range_calender.dart';
import 'package:hmg_patient_app_new/widgets/date_range_selector/viewmodel/date_range_view_model.dart';
import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
import 'package:provider/provider.dart';

import '../../widgets/common_bottom_sheet.dart' show showCommonBottomSheetWithoutHeight;

class MyAppointmentsPage extends StatefulWidget {
  const MyAppointmentsPage({super.key});

  @override
  State<MyAppointmentsPage> createState() => _MyAppointmentsPageState();
}

class _MyAppointmentsPageState extends State<MyAppointmentsPage> {
  late MyAppointmentsViewModel myAppointmentsViewModel;
  late BookAppointmentsViewModel bookAppointmentsViewModel;

  @override
  void initState() {
    scheduleMicrotask(() {
      myAppointmentsViewModel.initAppointmentsViewModel();
      myAppointmentsViewModel.getPatientAppointments(true, false);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    myAppointmentsViewModel = Provider.of<MyAppointmentsViewModel>(context, listen: false);
    bookAppointmentsViewModel = Provider.of<BookAppointmentsViewModel>(context, listen: false);
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: CollapsingListView(
        title: "Appointments List".needTranslation,
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 16.h),
              CustomTabBar(
                activeTextColor: Color(0xffED1C2B),
                activeBackgroundColor: Color(0xffED1C2B).withValues(alpha: .1),
                tabs: [
                  CustomTabBarModel(null, "All Appt.".needTranslation),
                  CustomTabBarModel(null, "Upcoming".needTranslation),
                  CustomTabBarModel(null, "Completed".needTranslation),
                ],
                onTabChange: (index) {
                  myAppointmentsViewModel.onTabChange(index);
                  myAppointmentsViewModel.updateListWRTTab(index);
                  context.read<DateRangeSelectorRangeViewModel>().flush();
                },
              ).paddingSymmetrical(24.h, 0.h),
              Consumer<MyAppointmentsViewModel>(builder: (context, myAppointmentsVM, child) {
                return getSelectedTabData(myAppointmentsVM.selectedTabIndex, myAppointmentsVM);
              }),
            ],
          ),
        ),
      ),
    );
  }

  Widget getSelectedTabData(int index, MyAppointmentsViewModel myAppointmentsVM) {
    return getAppointList(myAppointmentsVM, myAppointmentsVM.filteredAppointmentList);
  }

  Widget getAppointList(MyAppointmentsViewModel myAppointmentsVM, List<PatientAppointmentHistoryResponseModel> filteredAppointmentList) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Visibility(visible: myAppointmentsVM.availableFilters.isNotEmpty, child: getAppointmentFilters(myAppointmentsVM)),
        ListView.separated(
          padding: EdgeInsets.only(top: 24.h),
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: myAppointmentsVM.isMyAppointmentsLoading
              ? 5
              : filteredAppointmentList.isNotEmpty
                  ? filteredAppointmentList.length
                  : 1,
          itemBuilder: (context, index) {
            return myAppointmentsVM.isMyAppointmentsLoading
                ? Container(
                    decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
                    child: AppointmentCard(
                      patientAppointmentHistoryResponseModel: PatientAppointmentHistoryResponseModel(),
                      myAppointmentsViewModel: myAppointmentsViewModel,
                      bookAppointmentsViewModel: bookAppointmentsViewModel,
                      isLoading: true,
                      isFromHomePage: false,
                    ),
                  ).paddingSymmetrical(24.h, 0.h)
                : filteredAppointmentList.isNotEmpty
                    ? AnimationConfiguration.staggeredList(
                        position: index,
                        duration: const Duration(milliseconds: 500),
                        child: SlideAnimation(
                          verticalOffset: 100.0,
                          child: FadeInAnimation(
                            child: AnimatedContainer(
                              duration: Duration(milliseconds: 300),
                              curve: Curves.easeInOut,
                              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
                              child: AppointmentCard(
                                patientAppointmentHistoryResponseModel: filteredAppointmentList[index],
                                myAppointmentsViewModel: myAppointmentsViewModel,
                                bookAppointmentsViewModel: bookAppointmentsViewModel,
                                isLoading: false,
                                isFromHomePage: false,
                              ),
                            ).paddingSymmetrical(24.h, 0.h),
                          ),
                        ),
                      )
                    : Utils.getNoDataWidget(
                        context,
                        noDataText: "You don't have any appointments yet.".needTranslation,
                        callToActionButton: CustomButton(
                          text: LocaleKeys.bookAppo.tr(context: context),
                          onPressed: () {
                            Navigator.of(context).push(
                              CustomPageRoute(
                                page: BookAppointmentPage(),
                              ),
                            );
                          },
                          backgroundColor: Color(0xffFEE9EA),
                          borderColor: Color(0xffFEE9EA),
                          textColor: Color(0xffED1C2B),
                          fontSize: 14.f,
                          fontWeight: FontWeight.w500,
                          borderRadius: 12.r,
                          padding: EdgeInsets.fromLTRB(10.w, 0, 10.w, 0),
                          height: 40.h,
                          icon: AppAssets.add_icon,
                          iconColor: AppColors.primaryRedColor,
                        ).paddingSymmetrical(48.h, 0.h),
                      );
          },
          separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
        ),
        SizedBox(height: 24.h),
      ],
    );
  }

  Widget getAppointmentFilters(MyAppointmentsViewModel myAppointmentsVM) {
    return SizedBox(
        child: Row(
      children: [
        Expanded(
          child: ListView.separated(
              separatorBuilder: (_, index) => SizedBox(
                    width: 8.h,
                  ),
              scrollDirection: Axis.horizontal,
              itemCount: myAppointmentsVM.availableFilters.length,
              itemBuilder: (_, index) => AppointmentFilters(
                    selectedFilter: myAppointmentsVM.selectedFilter,
                    item: myAppointmentsVM.availableFilters[index],
                    onClicked: () {
                      if (myAppointmentsVM.availableFilters[index] == AppointmentListingFilters.DATESELECTION) {
                        showCommonBottomSheetWithoutHeight(
                          title: "Set The Date Range".needTranslation,
                          context,
                          child: DateRangeSelector(
                            onRangeSelected: (start, end) {
                              // if (start != null) {
                              myAppointmentsVM.getSelectedDateRange(start, end);
                              // }
                            },
                          ),
                          isFullScreen: false,
                          isCloseButtonVisible: true,
                          callBackFunc: () {},
                        );
                      } else {
                        myAppointmentsVM.setSelectedFilter(myAppointmentsVM.availableFilters[index]);
                        myAppointmentsVM.filterTheListAsPerSelection();
                      }
                    },
                  )),
        ),
      ],
    )).paddingOnly(top: 24.h, left: 24.h, right: 24.h);
  }
}