import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_export.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/book_appointments/models/laser_body_parts_data.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/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
import 'package:provider/provider.dart';
import 'package:smooth_corner/smooth_corner.dart';

class BodyPartsListing extends StatelessWidget {
  final List<LaserBodyPart> parts;
  final Function(LaserBodyPart) onPartSelected;
  final List<LaserBodyPart> selectedPart;
  final int laserCategoryID;
  final bool isMale;
  final bool isLoading;

  const BodyPartsListing(
      {super.key,
      required this.parts,
      required this.onPartSelected,
      required this.selectedPart,
      required this.laserCategoryID,
      required this.isMale, required this.isLoading});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Visibility(
            visible: isLoading,
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    childAspectRatio: 85 / 107,
                    crossAxisSpacing: 4.h,
                    mainAxisSpacing: 21.h),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: 20,
                // padding: fullBody != null ? EdgeInsets.only(top: 16) : EdgeInsets.zero,
                padding: EdgeInsets.zero,
                itemBuilder: (BuildContext context, int index) {
                  return SizedBox( height: 80, width: 80,).toShimmer2(isShow: isLoading);
                })),
        Visibility(
          visible: !isLoading,
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 75 / 107, crossAxisSpacing: 4.h, mainAxisSpacing: 21.h),
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: parts.length,
            // padding: fullBody != null ? EdgeInsets.only(top: 16) : EdgeInsets.zero,
            padding: EdgeInsets.zero,
            itemBuilder: (BuildContext context, int index) {
              bool _isSelected =
                  selectedPart.any((file) => file.id == parts[index].id);
              return InkWell(
                onTap: () {
                  onPartSelected(parts[index]);
                },
                child: AnimatedOpacity(
                  opacity: 1.0,
                  duration: Duration(milliseconds: 200),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      AspectRatio(
                        aspectRatio: 150 / 140,
                        child: FittedBox(
                          fit: BoxFit.fitWidth,
                          child: Stack(
                            alignment: Alignment.topRight,
                            children: [
                              Container(
                                margin: EdgeInsets.only(top: 5.h, right: 5.h),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15.0),
                                  border: Border.all(
                                      color: _isSelected
                                          ? AppColors.primaryRedColor
                                          : AppColors.borderGrayColor,
                                      width: 2.h),
                                ),
                                child: LaserBodyParts().getCategoryImage(isMale,
                                    laserCategoryID, parts[index].mappingCode!),
                              ),
                              if (_isSelected)
                                Container(
                                  width: 18.h,
                                  height: 18.h,
                                  decoration: BoxDecoration(
                                    color: AppColors.primaryRedColor,
                                    borderRadius: BorderRadius.circular(30.h),
                                  ),
                                  child: Icon(Icons.done,
                                      color: Colors.white, size: 12.h),
                                ),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(height: 6.h),
                      Expanded(
                        child: Center(
                          child: Column(
                            children: [
                              context.read<BookAppointmentsViewModel>().getLaserProcedureNameWRTLanguage(parts[index]).toText12(isBold: true, color: AppColors.textColor, isCenter: true, maxLine: 1),
                              SizedBox(height: 4.h),
                              AppCustomChipWidget(
                                  backgroundColor: _isSelected ? AppColors.chipSecondaryLightRedColor : AppColors.whiteColor,
                                  textColor: _isSelected ? AppColors.chipPrimaryRedBorderColor : AppColors.blackColor,
                                  // labelText: "${parts[index].timeDuration!} ${LocaleKeys.mins.tr()}",
                                  richText: "${parts[index].timeDuration!} ${LocaleKeys.mins.tr()}".toText12(
                                    isBold: true,
                                    color: _isSelected ? AppColors.chipPrimaryRedBorderColor : AppColors.blackColor,
                                  ),
                                  icon: AppAssets.waiting_time_clock,
                                  iconHasColor: true,
                                  iconColor: _isSelected ? AppColors.chipPrimaryRedBorderColor : AppColors.blackColor,
                                  iconSize: 16,
                                  labelPadding: EdgeInsetsDirectional.only(start: 8.w, end: 8.w),
                                  padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 8.w),
                                  deleteIconSize: Size(18.w, 18.h),
                                  shape: SmoothRectangleBorder(
                                    borderRadius: BorderRadius.circular(10.r),
                                    smoothness: 10,
                                    side: BorderSide(color: _isSelected ? AppColors.chipPrimaryRedBorderColor : AppColors.borderGrayColor, width: 1),
                                  )),

                              // AppCustomChipWidget(
                              //   labelText: "${parts[index].timeDuration!} ${LocaleKeys.mins.tr()}",
                              //   backgroundColor: AppColors.whiteColor,
                              //   // textColor: Utils.getCardBorderColor(myAppointmentsVM.currentQueueStatus),
                              // ),
                              // Row(
                              //   mainAxisAlignment: MainAxisAlignment.center,
                              //   children: [
                              //     "${LocaleKeys.mins.tr()}: ".toText12(isBold: true, color: AppColors.textColor, isCenter: true, maxLine: 2),
                              //     parts[index].timeDuration!.toText12(isBold: true, color: AppColors.textColor, isCenter: true, maxLine: 2),
                              //   ],
                              // ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}
