import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.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/string_extensions.dart' show CapExtension;
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/book_appointments/models/resp_models/laser_body_parts.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/book_appointment/laser/widgets/body_part_listing.dart' show BodyPartsListing;
import 'package:hmg_patient_app_new/presentation/book_appointment/laser/widgets/body_type_listing.dart'
    show BodyTypeListing;
import 'package:hmg_patient_app_new/presentation/book_appointment/select_doctor_page.dart';
import 'package:hmg_patient_app_new/theme/colors.dart' show AppColors;
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/routes/custom_page_route.dart';
import 'package:provider/provider.dart';

class LaserAppointment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      bottomNavigationBar:
      DecoratedBox(
        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
          color: AppColors.whiteColor,
          borderRadius: 20.h,
          hasShadow: true,
        ),
        child: Selector<BookAppointmentsViewModel, int>(selector: (_, vm)=>vm.duration,builder: (_, duration, __)=> Row(
          children: [
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    LocaleKeys.totalMinutes.tr(),
                    style: TextStyle(
                      fontSize: 12.f,
                      fontWeight: FontWeight.w600,
                      color: AppColors.textColor,
                      letterSpacing: -0.48,
                    ),
                  ),
                  Text(
                    "$duration / 90".tr(),
                    style: TextStyle(
                      fontSize: 16.f,
                      fontWeight: FontWeight.bold,
                      color: AppColors.textColor,
                      letterSpacing: -0.64,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: CustomButton(
                isDisabled: duration==0,
               text: LocaleKeys.continueString.tr(), onPressed: () {
                Navigator.of(context).push(
                  CustomPageRoute(
                    page: SelectDoctorPage(),
                  ),
                );
              },
              ),
            ),
          ],
        )).paddingSymmetrical(24.h, 12.h),
      ),
      body: CollapsingListView(
        title: LocaleKeys.laserClinic.tr(),
        child: SingleChildScrollView(
          child: Column(
            children: [
              CustomTabBar(
                activeTextColor: Color(0xffED1C2B),
                activeBackgroundColor: Color(0xffED1C2B).withValues(alpha: .1),
                tabs: [
                  CustomTabBarModel(null, LocaleKeys.malE.tr()),
                  CustomTabBarModel(null, LocaleKeys.femaleGender.tr()),
                ],
                onTabChange: (index) {
                  var viewmodel = context.read<BookAppointmentsViewModel>();
                  viewmodel.setBodyType(index);
                  viewmodel.setSelectedCategory(0);
                  viewmodel.getLaserClinic();
                },
              ),
              SizedBox(height: 8.h),
              Selector<BookAppointmentsViewModel, int>(
                selector: (_, vm) => vm.selectedBodyTypeIndex,
                builder: (_, bodyType, __) {
                  return BodyTypeListing(
                      availableBodyArea: context
                          .read<BookAppointmentsViewModel>()
                          .bodyTypes[bodyType],
                      selectedBodyAreaIndex: context
                          .read<BookAppointmentsViewModel>()
                          .selectedCategory,
                      onCategoryChanged: (category) {
                        context
                            .read<BookAppointmentsViewModel>()
                            .setSelectedCategory(category);
                      });
                },
              ),
              SizedBox(height: 8.h),
              Selector<BookAppointmentsViewModel, List<LaserBodyPart>>(selector: (_, vm) => vm.laserBodyPartsList, builder:(_, parts,__){
                return BodyPartsListing(
                  parts: parts,
                  onPartSelected: (part){
                    context.read<BookAppointmentsViewModel>().setSelectedBodyPart(part);
                  },
                  selectedPart: context.watch<BookAppointmentsViewModel>().selectedBodyPartList,
                  isLoading: context.watch<BookAppointmentsViewModel>().isBodyPartsLoading,
                  isMale: context.watch<BookAppointmentsViewModel>().selectedBodyTypeIndex == 0,
                  laserCategoryID: context.watch<BookAppointmentsViewModel>().readCurrentLaserCategoryID(),
                );
              }),
            ],
          ).paddingSymmetrical(24.h, 12.h),
        ),
      ),
    );
  }
}
