import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/navigation_bar/custom_appbar.dart';
import 'package:wallpaperx/generated/assets.dart';
import 'package:wallpaperx/page/login/login_controller.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesSettingBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: GetBuilder<LoginController>(
          id: "loginInfo",
          builder: (_) => Column(
            children: [
              CustomAppbar(
                "Login",
                backgroundColor: Colors.transparent,
                titleStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
              25.verticalSpace,
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20).w,
                child: Column(
                  children: [
                    _buildUsernameInput(),
                    25.verticalSpace,
                    _buildPasswordInput(),
                    25.verticalSpace,
                    _buildLogin(),
                    25.verticalSpace,
                    _buildRegister(),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildUsernameInput() {
    return Container(
      height: 31.w,
      padding: const EdgeInsets.symmetric(horizontal: 5).w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: controller.usernameEmpty ? Colors.red : Colors.grey,
            width: 1.w, // 下边框的宽度
          ),
        ),
      ),
      child: TextField(
        inputFormatters: [
          FilteringTextInputFormatter.allow(RegExp("[0-9.]|[a-zA-Z]|[@]")),
        ],
        focusNode: controller.usernameFocusNode,
        onTapOutside: (e) => {controller.usernameFocusNode.unfocus()},
        autofocus: false,
        controller: controller.usernameController,
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Username",
          hintStyle: TextStyle(
            color: controller.usernameEmpty ? Colors.red : Colors.grey,
            fontSize: 14.sp,
          ),
        ),
      ),
    );
  }

  Widget _buildPasswordInput() {
    return Container(
      height: 31.w,
      padding: const EdgeInsets.symmetric(horizontal: 5).w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: controller.passwordEmpty ? Colors.red : Colors.grey,
            width: 1.w, // 下边框的宽度
          ),
        ),
      ),
      child: TextField(
        inputFormatters: [
          FilteringTextInputFormatter.allow(RegExp("[0-9.]|[a-zA-Z]|[@]")),
        ],
        obscureText: true,
        focusNode: controller.passwordFocusNode,
        onTapOutside: (e) => {controller.passwordFocusNode.unfocus()},
        autofocus: false,
        controller: controller.passwordController,
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Password",
          hintStyle: TextStyle(
            color: controller.passwordEmpty ? Colors.red : Colors.grey,
            fontSize: 14.sp,
          ),
        ),
      ),
    );
  }

  Widget _buildLogin() {
    return GestureDetector(
      onTap: controller.login,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 5).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100).r,
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Login",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 20.sp,
                  fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildRegister() {
    return GestureDetector(
      onTap: controller.toUserEdit,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 5).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100).r,
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Register",
              style: TextStyle(
                  color: Colors.black87,
                  fontSize: 20.sp,
                  fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ),
    );
  }
}