import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/resource/string.gen.dart';

import '../../../../resource/assets.gen.dart';
import '../../new_user_controller.dart';

class StepGenderView extends BaseView<NewUserController> {
  const StepGenderView({super.key});

  @override
  Color backgroundColor() {
    return Colors.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(left: 30.w, right: 30.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                StringName.newUserGenderTitle,
                style: TextStyle(
                  color: Colors.black.withAlpha(204),
                  fontSize: 22.sp,
                  fontWeight: FontWeight.w500,
                  height: 0,
                ),
              ),
              SizedBox(height: 7.h),
              Text(
                StringName.newUserGenderDesc,
                style: TextStyle(
                  color: Colors.black.withAlpha(153),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
        ),
        SizedBox(height: 72.w),
        Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              _buildGenderSelector(
                genderValue: 2,
                title: '女生',
                subtitle: 'Girl',
                logo: Assets.images.iconChangeGenderFemaleLogo.image(
                  width: 20.w,
                  height: 20.w,
                ),
                selectedImage: Assets.images.iconChangeGenderFemaleSelect.image(
                  width: 320.w,
                  fit: BoxFit.fill,
                ),
                unselectedImage: Assets.images.iconChangeGenderFemaleUnselect
                    .image(width: 320.w, fit: BoxFit.cover),
                isRightAligned: true,
              ),

              SizedBox(height: 25.h),

              _buildGenderSelector(
                genderValue: 1,
                title: '男生',
                subtitle: 'Boy',
                logo: Assets.images.iconChangeGenderMaleLogo.image(
                  width: 20.w,
                  height: 20.w,
                ),
                selectedImage: Assets.images.iconChangeGenderMaleSelect.image(
                  width: 320.w,
                  fit: BoxFit.fill,
                ),
                unselectedImage: Assets.images.iconChangeGenderMaleUnselect
                    .image(width: 320.w, fit: BoxFit.cover),
                isRightAligned: false,
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildGenderSelector({
    required int genderValue, // 1: 男生, 2: 女生
    required String title,
    required String subtitle,
    required Widget logo,
    required Image selectedImage,
    required Image unselectedImage,
    required bool isRightAligned,
  }) {
    return GestureDetector(
      onTap: () {
        controller.changeGender(genderValue);
      },
      child: Obx(() {
        final isSelected = controller.currentGender == genderValue;
        return SizedBox(
          width: 320.w,
          height: 115.h,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              isSelected ? selectedImage : unselectedImage,
              Container(
                alignment:
                    isRightAligned
                        ? Alignment.centerRight
                        : Alignment.centerLeft,
                padding: EdgeInsets.only(
                  right: isRightAligned ? 40.w : 0,
                  left: isRightAligned ? 0 : 40.w,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children:
                          isRightAligned
                              ? [
                                logo,
                                SizedBox(width: 4.w),
                                Text(
                                  title,
                                  style: TextStyle(
                                    color:
                                        isSelected
                                            ? Colors.black.withAlpha(204)
                                            : Colors.black.withAlpha(102),
                                    fontSize: 22.sp,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ]
                              : [
                                Text(
                                  title,
                                  style: TextStyle(
                                    color:
                                        isSelected
                                            ? Colors.black.withAlpha(204)
                                            : Colors.black.withAlpha(102),
                                    fontSize: 22.sp,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                                SizedBox(width: 4.w),
                                logo,
                              ],
                    ),
                    SizedBox(height: 4.w),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children:
                          isRightAligned
                              ? [
                                SizedBox(width: 20.w, height: 20.w),
                                SizedBox(width: 4.w),
                                Text(
                                  subtitle,
                                  style: TextStyle(
                                    color: Colors.black.withAlpha(128),
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                              ]
                              : [
                                Text(
                                  subtitle,
                                  style: TextStyle(
                                    color: Colors.black.withAlpha(128),
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                                SizedBox(width: 4.w),
                                SizedBox(width: 20.w, height: 20.w),
                              ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}