import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wgshare/utils/utils.dart';

import '../../routes/app_routes.dart';
import '../../utils/color_util.dart';
import 'login_logic.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final logic = Get.find<LoginLogic>();
  final state = Get.find<LoginLogic>().state;

  @override
  void initState() {
    Utils.hideKeyboard();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Container(
            height: 340,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/login_bg.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: Column(
              children: [
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(top: 20),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/images/logo.png',
                        width: 80.w,
                        height: 80.h,
                      ),
                      SizedBox(height: 20.h),
                      Image.asset(
                        'assets/images/logo_title.png',
                        width: 70.w,
                        height: 24.h,
                      )
                    ],
                  ),
                )),
                Container(
                  height: 40,
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(99),
                        topRight: Radius.circular(99)),
                    color: Colors.white,
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Obx(() => Container(
                    child: Column(
                      children: [
                        Container(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Container(
                                  width: 140.w,
                                  height: 40.h,
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage(state.pageState.value ==
                                              0
                                          ? 'assets/images/login_tab_left_select_y.png'
                                          : 'assets/images/login_tab_left_select_n.png'),
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '账号',
                                    style: TextStyle(
                                        fontSize: 14.sp,
                                        color: state.pageState.value == 0
                                            ? Colors.white
                                            : ColorUtil.Color_120_137_203),
                                  ),
                                ),
                                onTap: () {
                                  logic.changePageState(0);
                                },
                              ),
                              GestureDetector(
                                child: Container(
                                  width: 140.w,
                                  height: 40.h,
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage(state.pageState.value ==
                                              0
                                          ? 'assets/images/login_tab_right_select_n.png'
                                          : 'assets/images/login_tab_right_select_y.png'),
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '会议号',
                                    style: TextStyle(
                                        fontSize: 14.sp,
                                        color: state.pageState.value == 0
                                            ? ColorUtil.Color_120_137_203
                                            : Colors.white),
                                  ),
                                ),
                                onTap: () {
                                  logic.changePageState(1);
                                },
                              )
                            ],
                          ),
                        ),

                        /**
                         * 账号密码输入框
                         */
                        Visibility(
                          visible: state.pageState.value == 0 ? true : false,
                          child: Container(
                            width: 280.w,
                            height: 40.h,
                            margin: const EdgeInsets.only(top: 30),
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(99)),
                              border: Border.all(
                                  width: 1.w,
                                  color: ColorUtil.Color_153_153_153),
                            ),
                            child: TextField(
                              controller: state.userNameController,
                              style: TextStyle(
                                fontSize: 14.sp,
                              ),
                              inputFormatters: <TextInputFormatter>[
                                LengthLimitingTextInputFormatter(18)
                              ],
                              decoration: InputDecoration(
                                  contentPadding: const EdgeInsets.all(0),
                                  border: const OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                  hintText: '请输入账号',
                                  hintStyle: TextStyle(
                                      color: ColorUtil.Color_153_153_153,
                                      fontSize: 14.sp)),
                            ),
                          ),
                        ),

                        Visibility(
                          visible: state.pageState.value == 0 ? true : false,
                          child: Container(
                            width: 280.w,
                            height: 40.h,
                            margin: const EdgeInsets.only(top: 12),
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(99)),
                              border: Border.all(
                                  width: 1.w,
                                  color: ColorUtil.Color_153_153_153),
                            ),
                            child: TextField(
                              controller: state.passwordController,
                              style: TextStyle(
                                fontSize: 14.sp,
                              ),
                              inputFormatters: <TextInputFormatter>[
                                FilteringTextInputFormatter.digitsOnly,
                                LengthLimitingTextInputFormatter(20)
                                //限制长度
                              ],
                              decoration: InputDecoration(
                                  contentPadding: const EdgeInsets.all(0),
                                  border: const OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                  hintText: '请输入密码',
                                  hintStyle: TextStyle(
                                      color: ColorUtil.Color_153_153_153,
                                      fontSize: 14.sp)),
                            ),
                          ),
                        ),

                        /// 会议号输入框
                        Visibility(
                          visible: state.pageState.value == 0 ? false : true,
                          child: Container(
                            width: 280.w,
                            height: 40.h,
                            margin: const EdgeInsets.only(top: 30),
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(99)),
                              border: Border.all(
                                  width: 1.w,
                                  color: ColorUtil.Color_153_153_153),
                            ),
                            child: TextField(
                              controller: state.meetingCodeController,
                              style: TextStyle(
                                fontSize: 14.sp,
                              ),
                              inputFormatters: <TextInputFormatter>[
                                FilteringTextInputFormatter.digitsOnly,
                                LengthLimitingTextInputFormatter(8)
                                //限制长度
                              ],
                              decoration: InputDecoration(
                                  contentPadding: const EdgeInsets.all(0),
                                  border: const OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                  hintText: '请输入会议号',
                                  hintStyle: TextStyle(
                                      color: ColorUtil.Color_153_153_153,
                                      fontSize: 14.sp)),
                            ),
                          ),
                        ),

                        /// 昵称输入框
                        Visibility(
                          visible: state.pageState.value == 0 ? false : true,
                          child: Container(
                            width: 280.w,
                            height: 40.h,
                            margin: const EdgeInsets.only(top: 12),
                            padding: const EdgeInsets.only(left: 12, right: 12),
                            decoration: BoxDecoration(
                              borderRadius:
                              const BorderRadius.all(Radius.circular(99)),
                              border: Border.all(
                                  width: 1.w,
                                  color: ColorUtil.Color_153_153_153),
                            ),
                            child: TextField(
                              controller: state.nickNameCodeController,
                              style: TextStyle(
                                fontSize: 14.sp,
                              ),
                              inputFormatters: <TextInputFormatter>[
                                LengthLimitingTextInputFormatter(10)
                                //限制长度
                              ],
                              decoration: InputDecoration(
                                  contentPadding: const EdgeInsets.all(0),
                                  border: const OutlineInputBorder(
                                      borderSide: BorderSide.none),
                                  hintText: '请输入昵称',
                                  hintStyle: TextStyle(
                                      color: ColorUtil.Color_153_153_153,
                                      fontSize: 14.sp)),
                            ),
                          ),
                        ),

                        /// 相关协议
                        Container(
                          width: 280.w,
                          margin: const EdgeInsets.only(top: 16),
                          child: Row(
                            children: [
                              GestureDetector(
                                child: Image.asset(
                                  state.checkAgreementBool.value == false
                                      ? 'assets/images/login_agreement_select_n.png'
                                      : 'assets/images/login_agreement_select_y.png',
                                  width: 16.w,
                                  height: 16.h,
                                ),
                                onTap: () {
                                  if (state.checkAgreementBool.value == false) {
                                    logic.changeAgreementState(true);
                                  } else {
                                    logic.changeAgreementState(false);
                                  }
                                },
                              ),
                              SizedBox(width: 6.w),
                              Text(
                                '我阅读并同意',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: ColorUtil.Color_153_153_153,
                                ),
                              ),
                              GestureDetector(
                                child: Text(
                                  '《服务协议》',
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: ColorUtil.Color_85_117_242,
                                  ),
                                ),
                                onTap: (){
                                  Get.toNamed(Routes.agreementReadPage);
                                },
                              ),
                              Text(
                                '和',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: ColorUtil.Color_153_153_153,
                                ),
                              ),
                              GestureDetector(
                                child: Text(
                                  '《隐私政策》',
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: ColorUtil.Color_85_117_242,
                                  ),
                                ),
                                onTap: (){
                                  Get.toNamed(Routes.agreementReadPage);
                                },
                              )
                            ],
                          ),
                        ),

                        /// 按钮
                        GestureDetector(
                          child: Container(
                            width: 280.w,
                            height: 44.h,
                            margin: const EdgeInsets.only(top: 50),
                            decoration: const BoxDecoration(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(99)),
                              color: ColorUtil.Color_85_117_242,
                            ),
                            alignment: Alignment.center,
                            child: Text(
                              state.pageState.value == 0 ? '登录' : '加入会议',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: Colors.white,
                              ),
                            ),
                          ),
                          onTap: () {
                            if (state.pageState.value == 0) {
                              logic.doHttpLogin();
                            } else {
                              logic.doHttpCheckMeetingRoom();
                            }
                          },
                        )
                      ],
                    ),
                  )),
            ),
          )
        ],
      ),
    );
  }
}