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/common_models/smart_watch.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/generated/locale_keys.g.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:provider/provider.dart';

import '../../core/utils/utils.dart';
import '../../features/smartwatch_health_data/health_provider.dart' show HealthProvider;

class SmartwatchInstructionsPage extends StatelessWidget {
  final SmartwatchDetails smartwatchDetails;

  const SmartwatchInstructionsPage({super.key, required this.smartwatchDetails});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: CollapsingListView(
        title: "How does it work".needTranslation,
        bottomChild: Container(
          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
            color: AppColors.whiteColor,
            borderRadius: 24.r,
          ),
          child: CustomButton(
            text: LocaleKeys.getStarted.tr(context: context),
            onPressed: () {
              context.read<HealthProvider>().initDevice();
            },
            backgroundColor: AppColors.primaryRedColor,
            borderColor: AppColors.primaryRedColor,
            textColor: AppColors.whiteColor,
            fontSize: 16.f,
            isBold: true,
            borderRadius: 12.r,
            height: 50.h,
          ).paddingSymmetrical(24.w, 30.h),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          spacing: 18.h,
          children: [
            Utils.buildImgWithAssets(
              icon: smartwatchDetails.watchIcon,
              fit: BoxFit.contain,
              height: 280.h,
              width: 280.w,
            ),
            DecoratedBox(
              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 12.h),
              child: Column(
                children: [
                  watchContentDetails(
                    title: smartwatchDetails.detailsTitle,
                    description: smartwatchDetails.details,
                    icon: smartwatchDetails.smallIcon,
                    descriptionTextColor: AppColors.primaryRedColor,
                  ),
                  Divider(
                    color: AppColors.dividerColor,
                    thickness: 1.h,
                  ).paddingOnly(top: 16.h, bottom: 16.h),
                  watchContentDetails(
                    title: smartwatchDetails.secondTitle,
                    description: LocaleKeys.updatetheinformation.tr(),
                    icon: AppAssets.bluetooth,
                    descriptionTextColor: AppColors.greyTextColor,
                  ),
                ],
              ).paddingSymmetrical(16.w, 16.h),
            )
          ],
        ).paddingSymmetrical(24.w, 16.h),
      ),
    );
  }

  Widget watchContentDetails({required String title, required String description, required String icon, required Color descriptionTextColor}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      spacing: 8.h,
      children: [
        DecoratedBox(
          decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 12.h),
          child: Utils.buildSvgWithAssets(icon: icon, width: 40.w, height: 40.h),
        ),
        title.toText16(isBold: true, color: AppColors.textColor),
        description.toText12(isBold: true, color: descriptionTextColor)
      ],
    );
  }
}
