import 'package:flutter/cupertino.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/user_profile/user_profile_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../resource/assets.gen.dart';
import '../../resource/colors.gen.dart';
import '../../resource/string.gen.dart';
import '../../router/app_pages.dart';
import '../../utils/styles.dart';
import '../../widget/avatar/avatar_image_widget.dart';

class UserProfilePage extends BasePage<UserProfileController> {
  const UserProfilePage({super.key});

  static start() {
    Get.toNamed(RoutePath.userProfile);
  }

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

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
        SafeArea(
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  _buildTitle(),
                  SizedBox(height: 70.w),
                  _buildAvatar(),
                  SizedBox(height: 12.w),
                  _buildNameCard(),
                  SizedBox(height: 28.w),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 16.w),
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                    ),
                    child: Column(
                      children: [
                        Obx(() {
                          return _buildListItem(
                            StringName.gender, controller.genderText,
                            onTap: () {
                              controller.clickGender();
                            },
                          );
                        }),
                        Divider(
                          indent: 16.w,
                          endIndent: 16.w,
                          height: 1.h,
                          color: Color(0xFFF5F4F9),
                        ),
                        Obx(() {
                          return _buildListItem(
                            StringName.birthday, controller.currentBirthday??"请选择生日",
                            onTap: () {
                              controller.clickBirthday();
                            },
                          );
                        }),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildNameCard() {
    return GestureDetector(
      onTap: () {
        controller.clickNickname();
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Obx(() {
            return Text(
              controller.currentNickname ?? "请输入昵称",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.black,
                fontSize: 20.sp,
                fontWeight: FontWeight.w500,
              ),
            );
          }),
          Container(
            child: Assets.images.iconCharacterCustomDetailEdit.image(
              width: 20.r,
              height: 20.r,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAvatar() {
    return GestureDetector(
      onTap: controller.nextAvatar,
      child: Obx(() {
        return Stack(
          children: [
            SizedBox(
              width: 84.w,
              height: 84.w,
              child:
              controller.userAvatarUrl.isNotEmpty
                  ? CircleAvatarWidget(
                image:
                Assets.images.iconKeyboardDefaultAvatar.provider(),
                imageUrl: controller.userAvatarUrl,
                size: 84.w,
                borderColor: Colors.white,
                borderWidth: 2.r,
                placeholder: (_, __) {
                  return const CupertinoActivityIndicator();
                },
              )
                  : SizedBox(),
            ),
            Positioned(right: 0, bottom: 0, child: _buildAvatarSwitch()),
          ],
        );
      }),
    );
  }

  Widget _buildAvatarSwitch() {
    return GestureDetector(
      onTap: controller.nextAvatar,
      child: SizedBox(
        width: 32.r,
        height: 32.r,
        child: Assets.images.iconCharacterCustomDetailSwitch.image(
          width: 32.r,
          height: 32.r,
          fit: BoxFit.contain,
        ),
      ),
    );
  }

  Widget _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.personalProfile,
            style: Styles.getTextStyleBlack204W500(17.sp),
          ),
          SizedBox( width: 24.w,
            height: 24.w,),
        ],
      ),
    );
  }



  Widget _buildListItem(String title, String desc,
      {required VoidCallback onTap}) {
    return InkWell(
      // 效果
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 12.h),
        child: Row(
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 15.sp,
                color: Colors.black.withAlpha(204),
                fontWeight: FontWeight.w500,
              ),
            ),
            const Spacer(),
            Text(
              desc,
              style: TextStyle(
                color: Colors.black.withAlpha(153),
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
            Assets.images.iconAboutArrowLeft.image(width: 20.w, height: 20.w),
          ],
        ),
      ),
    );
  }
}