import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:hmg_patient_app_new/core/utils/size_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/medical_file/medical_file_view_model.dart';
import 'package:hmg_patient_app_new/features/medical_file/models/patient_medical_response_model.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/presentation/medical_file/widgets/patient_medical_report_card.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/custom_tab_bar.dart';
import 'package:provider/provider.dart';

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

  @override
  State<MedicalReportsPage> createState() => _MedicalReportsPageState();
}

class _MedicalReportsPageState extends State<MedicalReportsPage> {
  late MedicalFileViewModel medicalFileViewModel;

  @override
  Widget build(BuildContext context) {
    medicalFileViewModel = Provider.of<MedicalFileViewModel>(context, listen: false);
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: CollapsingListView(
        title: "Medical Reports".needTranslation,
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 16.h),
              CustomTabBar(
                activeTextColor: Color(0xffED1C2B),
                activeBackgroundColor: Color(0xffED1C2B).withValues(alpha: .1),
                tabs: [
                  CustomTabBarModel(null, "Requested".needTranslation),
                  CustomTabBarModel(null, "Ready".needTranslation),
                  CustomTabBarModel(null, "Cancelled".needTranslation),
                ],
                onTabChange: (index) {
                  medicalFileViewModel.onMedicalReportTabChange(index);
                },
              ).paddingSymmetrical(24.h, 0.h),
              Consumer<MedicalFileViewModel>(builder: (context, medicalFileVM, child) {
                return ListView.separated(
                  padding: EdgeInsets.only(top: 24.h),
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: medicalFileViewModel.isPatientMedicalReportsListLoading ? 3 : medicalFileViewModel.patientMedicalReportList.length,
                  // medicalFileViewModel.patientMedicalReportList.isNotEmpty
                  //         ? medicalFileViewModel.patientMedicalReportList.length
                  //         : 1,
                  itemBuilder: (context, index) {
                    return medicalFileViewModel.isPatientMedicalReportsListLoading
                        ? PatientMedicalReportCard(
                            patientMedicalReportResponseModel: PatientMedicalReportResponseModel(),
                            medicalFileViewModel: medicalFileVM,
                            isLoading: true,
                          ).paddingSymmetrical(24.h, 0.h)
                        : 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: PatientMedicalReportCard(
                                    patientMedicalReportResponseModel: medicalFileVM.patientMedicalReportList[index],
                                    medicalFileViewModel: medicalFileVM,

                                    isLoading: false,
                                  ),
                                ).paddingSymmetrical(24.h, 0.h),
                              ),
                            ),
                          );
                  },
                  separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
                );
              }),
              SizedBox(height: 24.h),
            ],
          ),
        ),
      ),
    );
  }
}
