import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/intimacy_scale/intimacy_scale_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';
import '../../resource/string.gen.dart';
import '../../router/app_pages.dart';
import '../../utils/intimacy_util.dart';
import '../../utils/styles.dart';
import '../../widget/flutter_ruler_picker.dart';
import '../../widget/heart_fill_view.dart';

class IntimacyScalePage extends BasePage<IntimacyScaleController> {
  const IntimacyScalePage({super.key});

  static void start() {
    Get.toNamed(RoutePath.intimacyScale);
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    return Color(0xFFF6F5FA);
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              _buildTitle(),
              SizedBox(height: 128.w),

              SizedBox(
                width: 250.w,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Obx(() {
                      return HeartFillAnimation(
                        fillProgress:
                        controller.currentCustomIntimacy.value > 0
                            ? controller.currentCustomIntimacy.value / 100
                            : 0,
                        width: 210.w,
                      );
                    }),
                    Positioned(
                      left: 0,
                      right: 0,
                      child: Obx(() {
                        return Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: controller.currentCustomIntimacy.value.toString(),
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 70.sp,
                                  wordSpacing: 0,
                                  height: 0,
                                  fontWeight: FontWeight.w700,
                                  shadows: [
                                    Shadow(
                                      offset: Offset(0, 3),
                                      blurRadius: 9,
                                      color: const Color(
                                        0xFFFF6BD3,
                                      ).withOpacity(0.63),
                                    ),
                                  ],
                                ),
                              ),
                              TextSpan(
                                text: "%",

                                style: TextStyle(
                                  wordSpacing: 0,
                                  color: Colors.white,
                                  fontSize: 35.15.sp,
                                  fontWeight: FontWeight.w700,
                                  shadows: [
                                    Shadow(
                                      offset: Offset(0, 3),
                                      blurRadius: 9,
                                      color: const Color(
                                        0xFFFF6BD3,
                                      ).withOpacity(0.63),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                          textAlign: TextAlign.center,
                        );
                      }),
                    ),
                  ],
                ),
              ),

              SizedBox(height: 50.w),

              buildIntimacyLevelName(),

              SizedBox(height: 20.w),
              buildRulerPicker(context),
            ],
          ),
        ),
        Positioned(
          bottom: 20.h,
          left: 16.w,
          right: 16.w,
          child: InkWell(
            onTap: () {
              controller.clickSaveButton();
            },
            child: Center(
              child: Container(
                width: 150.w,
                height: 48.h,
                alignment: Alignment.center,
                decoration: Styles.getActivateButtonDecoration(31.r),
                child: Text(
                  StringName.save,
                  style: Styles.getTextStyleWhiteW500(16.sp),
                ),
              ),
            ),
          ),
        ),
        // 背景图片
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
      ],
    );
  }

  Row buildRulerPicker(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          child: Obx(() {
            return RulerPicker(
              rulerBackgroundColor: Colors.transparent,
              controller: controller.rulerPickerController.value,
              onBuildRulerScaleText: (index, value) {
                return "";
              },
              ranges: controller.ranges,
              onValueChanged: (value) {
                controller.onChangeIntimacy(value);
              },

              width: 360.w,
              height: 96.w,
              rulerMarginTop: 25.w,
              marker: Column(
                children: [
                  Assets.images.iconIntimacyScaleMark.image(
                    width: 25.w,
                    height: 25.w,
                  ),
                  Container(
                    width: 8.w,
                    height: 48.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(40.w),
                      color: Color(0xff7d46fc),
                    ),
                  ),
                ],
              ),
            );
          }),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () => controller.clickBack(),
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
          Text(
            StringName.intimacyIndex,
            style: Styles.getTextStyleBlack204W500(17.sp),
          ),
          SizedBox(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  // 亲密阶段名称
  Widget buildIntimacyLevelName() {
    return Obx(() {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
        decoration: ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(17.r),
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Assets.images.iconKeyboardLoveLogo.image(width: 18.w, height: 18.w),
            Text(
              IntimacyUtil.getIntimacyName(controller.currentCustomIntimacy.value),
              style: Styles.getTextStyleBlack153W400(14.sp),
            ),
          ],
        ),
      );
    });
  }
}