import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/change/nickname/change_nickname_controller.dart';
import 'package:keyboard/utils/styles.dart';

import '../../../resource/assets.gen.dart';
import '../../../router/app_pages.dart';

class ChangeNicknamePage extends BasePage<ChangeNicknameController> {
  const ChangeNicknamePage({super.key});

  static Future start({String? nickName}) async {
    return Get.toNamed(
      RoutePath.changeNickname,
      arguments: {"nickName": nickName},
    );
  }

  @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.nickname.value.isNotEmpty,
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _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,
            ),
          ),
        ],
      ),
    );
  }

  _buildContent() {
    return Column(
      children: [
        Text('修改昵称', style: Styles.getTextStyleBlack204W500(22.sp)),
        Container(
          margin: EdgeInsets.only(top: 119.h, left: 27.w, right: 27.w),
          alignment: Alignment.center,
          child: Container(
            height: 48.h,
            alignment: Alignment.center,
            child: TextField(
              controller: controller.textEditingController,
              // maxLength: maxLength,
              maxLines: 1,

              onChanged: (value) {
                controller.nickname.value = value;
              },
              cursorColor: Color(0xFF7B7DFF),
              textAlign: TextAlign.center,
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                counterText: "",
                hintText: "请输入你的昵称",
                hintStyle: TextStyle(
                  color: Colors.black.withAlpha(77),
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w500,
                ),
                border: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.black.withAlpha(26),
                    width: 1.w,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.black.withAlpha(26),
                    width: 1.w,
                  ),
                ),
                filled: true,
                fillColor: Colors.transparent,
              ),
            ),
          ),
        ),
      ],
    );
  }

  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,
            ),
          ),
        ),
      ),
    );
  }
}