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 'edit_userinfo_controller.dart';

class EditUserinfoView extends GetView<EditUserinfoController> {
  const EditUserinfoView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(EditUserinfoController());
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.imagesSettingBackground),
            fit: BoxFit.cover,
          ),
        ),
        child: GetBuilder<EditUserinfoController>(
          id: "loginInfo",
          builder: (_) => Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CustomAppbar(
                controller.title,
                backgroundColor: Colors.transparent,
                titleStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600),
              ),
              Container(
                padding: const EdgeInsets.all(20).w,
                child: Column(
                  children: [
                    Obx(() => _buildAvatar()),
                    15.verticalSpace,
                    _buildUsernameInput(),
                    15.verticalSpace,
                    _buildEmailInput(),
                    15.verticalSpace,
                    _buildPasswordInput(),
                    15.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,
              border: Border.all(color: Colors.white),
            ),
            child: Image.asset(
              controller.avatar.value,
              fit: BoxFit.cover,
            ),
          ),
          Expanded(child: Container()),
          GestureDetector(
            onTap: controller.changeAvatar,
            child: Container(
              padding: const EdgeInsets.symmetric(
                vertical: 2,
                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: 14.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Username",
          hintStyle: TextStyle(
            color: controller.usernameEmpty ? Colors.red : Colors.grey,
            fontSize: 14.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: 14.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "E-mail",
          hintStyle: TextStyle(
            color: controller.emailEmpty ? Colors.red : Colors.grey,
            fontSize: 14.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: 14.sp,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "Password",
          hintStyle: TextStyle(
            color: controller.passwordEmpty ? Colors.red : Colors.grey,
            fontSize: 14.sp,
          ),
        ),
      ),
    );
  }

  Widget _buildApply() {
    return GestureDetector(
      onTap: controller.editUserInfo,
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15).w,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50).r, color: Colors.white),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Apply",
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }
}