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_state.dart';
import 'package:hmg_patient_app_new/core/dependencies.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/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/appointment_card.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/custom_tab_bar.dart';
import 'package:hmg_patient_app_new/widgets/shimmer/movies_shimmer_widget.dart';
import 'package:provider/provider.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    myAppointmentsViewModel = Provider.of<MyAppointmentsViewModel>(context);
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      appBar: AppBar(
        title: "Appointments List".needTranslation.toText18(),
        backgroundColor: AppColors.bgScaffoldColor,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                "Appointments List".needTranslation.toText24(isBold: true),
              ],
            ).paddingSymmetrical(24.h, 24.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) {
                print(index);
              },
            ).paddingSymmetrical(24.h, 0.h),
            Consumer<MyAppointmentsViewModel>(builder: (context, myAppointmentsVM, child) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 24.h),
                  // Expandable list
                  ListView.separated(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: myAppointmentsVM.isMyAppointmentsLoading ? 5 : myAppointmentsVM.patientAppointmentsHistoryList.isNotEmpty ? myAppointmentsVM.patientAppointmentsHistoryList.length : 1,
                    itemBuilder: (context, index) {
                      return myAppointmentsVM.isMyAppointmentsLoading
                          ? const MoviesShimmerWidget().paddingSymmetrical(24.h, 0.h)
                          : myAppointmentsVM.patientAppointmentsHistoryList.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,
                                    margin: EdgeInsets.symmetric(vertical: 8.h),
                                    decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
                                    child: AppointmentCard(
                                      patientAppointmentHistoryResponseModel: myAppointmentsVM.patientAppointmentsHistoryList[index],
                                      myAppointmentsViewModel: myAppointmentsViewModel,
                                    ),
                                  ).paddingSymmetrical(24.h, 0.h),
                                ),
                              ),
                            ) : Utils.getNoDataWidget(context);
                    },
                    separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
                  ),
                ],
              );
            }),
          ],
        ),
      ),
    );
  }
}