import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';
import 'package:starwork_flutter/base/app_logger.dart';
import 'package:starwork_flutter/common/constant/app_colors.dart';
import 'package:starwork_flutter/common/constant/app_toast_messages.dart';
import 'package:starwork_flutter/common/widgets/custome_app_bar_wdiget.dart';
import 'package:starwork_flutter/extension/function_extension.dart';
import 'package:starwork_flutter/views/team/joinTeam/join_team_controller.dart';

class JoinTeamView extends GetView<JoinTeamController> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        backgroundColor: AppColors.scaffoldBackgroundColor,
        appBar: CustomAppBarWidget(
          title: '加入团队'.tr,
        ),
        body: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 10.w,
            vertical: 10.h,
          ),
          child: Column(
            children: [
              Row(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '输入团队码',
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      SizedBox(height: 4.h),
                      Text(
                        '团队码是一个由字母组成的8位编码，可通过管理员获取',
                        style: TextStyle(
                          fontSize: 12.sp,
                          fontWeight: FontWeight.w400,
                          color: Colors.grey,
                        ),
                      ),
                    ],
                  )
                ],
              ),
              SizedBox(height: 10.h),
              Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 10.w,
                  vertical: 10.h,
                ),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                child: Column(
                  children: [
                    Pinput(
                      length: 8,
                      obscureText: false,
                      autofocus: false,
                      defaultPinTheme: PinTheme(
                        width: 50.w,
                        height: 34.h,
                        textStyle: TextStyle(
                          fontSize: 20.sp,
                          color: Colors.black,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.grey[100],
                          borderRadius: BorderRadius.circular(4.r),
                        ),
                      ),
                      validator: (value) {
                        if (value!.isEmpty) return '请输入团队码';
                        if (value.length != 8) return '验证码需8位';
                        return null;
                      },
                      onCompleted: (pin) {},
                      onChanged: (value) {
                        controller.teamCode.value = value;
                      },
                    ),
                    SizedBox(height: 10.h),
                    TextField(
                      controller: controller.nameInputController,
                      keyboardType: TextInputType.text,
                      textInputAction: TextInputAction.done,
                      onChanged: (value) {
                        // 触发更新以显示/隐藏清除按钮
                      },
                      decoration: InputDecoration(
                        counterText: '',
                        hintText: '请输入您的姓名',
                        // 设置无边框
                        border: InputBorder.none,
                        // 设置背景颜色为灰色，圆角
                        filled: true,
                        fillColor: Colors.grey[100],
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: 16.w,
                          vertical: 12.h,
                        ),
                        suffixIcon: controller.nameInputController.text.isNotEmpty
                            ? IconButton(
                                icon: const Icon(Icons.clear, color: Colors.grey),
                                onPressed: () {
                                  controller.nameInputController.clear(); // 清空输入
                                },
                              )
                            : null,
                        // 如果没有内容，就不显示清除按钮,
                        // 获取焦点时的边框
                        focusedBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                            color: Colors.blue,
                            width: 1.5,
                          ),
                          borderRadius: BorderRadius.circular(8.0.r),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: const BorderSide(color: Colors.transparent),
                          borderRadius: BorderRadius.circular(8.0.r),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 10.h),
              SizedBox(
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 添加这行来让按钮分布在两端
                  children: [
                    // Expanded(
                    //   // 使用Expanded来让按钮根据内容扩展
                    //   child: ElevatedButton(
                    //     onPressed: () {}.debounce(),
                    //     style: ElevatedButton.styleFrom(
                    //       backgroundColor: Colors.white,
                    //       padding: EdgeInsets.symmetric(vertical: 12.h),
                    //       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
                    //     ),
                    //     child: Text(
                    //       '扫描二维码加入'.tr,
                    //       style: TextStyle(
                    //         fontSize: 16.sp,
                    //         color: Colors.blue,
                    //         fontWeight: FontWeight.w500,
                    //       ),
                    //     ),
                    //   ),
                    // ),
                    SizedBox(width: 10.w), // 按钮之间的间距
                    Expanded(
                      // 使用Expanded来让按钮根据内容扩展
                      child: ElevatedButton(
                        onPressed: () {
                          if (controller.teamCode.value.isEmpty) {
                            controller.showToast(AppToastMessages.notInputTeamCode);
                            return;
                          }
                          if (controller.nameInputController.text.isEmpty) {
                            controller.showToast(AppToastMessages.notInputName);
                            return;
                          }
                          controller.joinTeam();
                        }.debounce(),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.blue,
                          padding: EdgeInsets.symmetric(vertical: 12.h),
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
                        ),
                        child: Text(
                          '申请加入'.tr,
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}