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/user_edit/user_edit_controller.dart';

class UserEditView extends GetView<UserEditController> {
  const UserEditView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(UserEditController());
    return Scaffold(
      appBar: BaseAppBar(controller.title),
      body: Container(
        padding: const EdgeInsets.all(15).w,
        child: GetBuilder<UserEditController>(
          id: "loginInfo",
          builder: (_) => Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Obx(() => _buildAvatar()),
              20.verticalSpace,
              _buildUsernameInput(),
              20.verticalSpace,
              _buildEmailInput(),
              20.verticalSpace,
              _buildPasswordInput(),
              20.verticalSpace,
              _buildApply(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAvatar() {
    return Container(
      padding: const EdgeInsets.only(bottom: 5).w,
      width: double.infinity,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.grey, // 下边框的颜色
            width: 1.w, // 下边框的宽度
          ),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            height: 60.w,
            width: 60.w,
            clipBehavior: Clip.hardEdge,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(40).r,
            ),
            child: Image.asset(
              controller.avatar.value,
              fit: BoxFit.cover,
            ),
          ),
          Expanded(child: Container()),
          GestureDetector(
            onTap: controller.editAvatar,
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 2.w, horizontal: 5.w),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20).r,
                  color: Colors.white),
              child: Text(
                "edit",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 16.sp,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  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 _buildEmailInput() {
    return Container(
      height: 30.w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: controller.emailEmpty ? Colors.red : Colors.grey,
            width: 1.w, // 下边框的宽度
          ),
        ),
      ),
      child: TextField(
        inputFormatters: [
          FilteringTextInputFormatter.allow(RegExp("[0-9.]|[a-zA-Z]|[@]")),
        ],
        focusNode: controller.emailFocusNode,
        onTapOutside: (e) => {controller.emailFocusNode.unfocus()},
        autofocus: false,
        controller: controller.emailController,
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
          fontSize: 12.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "E-mail",
          hintStyle: TextStyle(
            color: controller.emailEmpty ? 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]|[@]")),
        ],
        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 _buildApply() {
    return GestureDetector(
      onTap: controller.setUserInfo,
      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(
              "Apply",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }
}