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/base_appbar.dart';
import 'package:wallpaperx/page/login/login_controller.dart';
import 'package:wallpaperx/res/values/strings.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const BaseAppBar(appName),
      body: Container(
        padding: const EdgeInsets.all(15).w,
        child: GetBuilder<LoginController>(
          id: "loginInfo",
          builder: (_) => Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              _buildUsernameInput(),
              20.verticalSpace,
              _buildPasswordInput(),
              20.verticalSpace,
              _buildLogin(),
              20.verticalSpace,
              _buildRegister(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildUsernameInput() {
    return Container(
      height: 30.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: 12.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Username",
          hintStyle: TextStyle(
            color: controller.usernameEmpty ? Colors.red : Colors.grey,
            fontSize: 12.sp,
          ),
        ),
      ),
    );
  }

  Widget _buildPasswordInput() {
    return Container(
      height: 30.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: 12.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Password",
          hintStyle: TextStyle(
            color: controller.passwordEmpty ? Colors.red : Colors.grey,
            fontSize: 12.sp,
          ),
        ),
      ),
    );
  }

  Widget _buildLogin() {
    return GestureDetector(
      onTap: controller.onTapLogin,
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 15.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20).r, color: Colors.white),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Login",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildRegister() {
    return GestureDetector(
      onTap: controller.onTapToUserEdit,
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 15.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20).r, color: Colors.white),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Register",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }
}