import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:get/get.dart';
import 'package:keyboard/module/change/gender/change_gender_controller.dart';
import 'package:flutter/material.dart';
import '../../../resource/assets.gen.dart';
import '../../../router/app_pages.dart';
import '../../../utils/styles.dart';

class ChangeGenderPage extends BasePage<ChangeGenderController> {
  const ChangeGenderPage({super.key});

  static Future start({int? gender}) async {
    return Get.toNamed(RoutePath.changeGender, arguments: {"gender": gender});
  }

  @override
  bool immersive() {
    return true;
  }

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

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
        SafeArea(
          child: Stack(
            children: [
              SingleChildScrollView(
                child: Column(
                  children: [
                    _buildTitle(),
                    SizedBox(height: 40.h),
                    _buildContent(),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(bottom: 32.h),
                  child: Obx(() {
                    return _buildSaveButton(
                      onTap: () {
                        controller.clickSave();
                      },
                      isEnable: controller.currentGender.value != null,
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSaveButton({required VoidCallback onTap, required isEnable}) {
    return GestureDetector(
      onTap: () {
        onTap();
      },
      child: Container(
        width: 260.w,
        height: 48.h,
        decoration:
            isEnable
                ? Styles.getActivateButtonDecoration(31.r)
                : Styles.getInactiveButtonDecoration(31.r),
        child: Center(
          child: Text(
            '保存',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }

  _buildContent() {
    return Column(
      children: [
        Text('选择性别', style: Styles.getTextStyleBlack204W500(22.sp)),
        SizedBox(height: 119.h),
        _buildFemale(),
        SizedBox(height: 25.h),
        _buildMale(),
      ],
    );
  }

  _buildFemale() {
    return GestureDetector(
      onTap: () {
        if (controller.currentGender.value == 2) {
          controller.currentGender.value = 1;
        } else {
          controller.currentGender.value = 2;
        }
      },
      child: Obx(() {
        return SizedBox(
          width: 320.w,
          height: 115.h,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              controller.currentGender.value == 2
                  ? Assets.images.iconChangeGenderFemaleSelect.image(
                    width: 320.w,
                    fit: BoxFit.fill,
                  )
                  : Assets.images.iconChangeGenderFemaleUnselect.image(
                    width: 320.w,
                    fit: BoxFit.cover,
                  ),
              Container(
                alignment: Alignment.centerRight,
                padding: EdgeInsets.only(right: 40.w),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Assets.images.iconChangeGenderFemaleLogo.image(
                          width: 20.w,
                          height: 20.w,
                        ),
                        SizedBox(width: 4.w),
                        Text(
                          '女生',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color:
                                controller.currentGender.value == 2
                                    ? Colors.black.withAlpha(204)
                                    : Colors.black
                                        .withAlpha(204)
                                        .withValues(alpha: 0.5),
                            fontSize: 22.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 4.w),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SizedBox(width: 20.w, height: 20.w),
                        SizedBox(width: 4.w),
                        Text(
                          'Girl',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.black.withAlpha(128),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }

  _buildMale() {
    return GestureDetector(
      onTap: () {
        if (controller.currentGender.value == 1) {
          controller.currentGender.value = 2;
        } else {
          controller.currentGender.value = 1;
        }
      },
      child: Obx(() {
        return SizedBox(
          width: 320.w,
          height: 115.h,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              controller.currentGender.value == 1
                  ? Assets.images.iconChangeGenderMaleSelect.image(
                    width: 320.w,
                    fit: BoxFit.fill,
                  )
                  : Assets.images.iconChangeGenderMaleUnselect.image(
                    width: 320.w,
                    fit: BoxFit.cover,
                  ),
              Container(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 40.w),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          '男生',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color:
                                controller.currentGender.value == 1
                                    ? Colors.black.withAlpha(204)
                                    : Colors.black
                                        .withAlpha(204)
                                        .withValues(alpha: 0.5),
                            fontSize: 22.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                        SizedBox(width: 4.w),
                        Assets.images.iconChangeGenderMaleLogo.image(
                          width: 20.w,
                          height: 20.w,
                        ),
                      ],
                    ),
                    SizedBox(height: 4.w),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          'Boy',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.black.withAlpha(128),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        SizedBox(width: 4.w),
                        SizedBox(width: 20.w, height: 20.w),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}