import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:web_panel/routs/rout_name.dart';
import 'package:web_panel/utils/App_color.dart';
import 'package:web_panel/utils/spacing.dart';

import '../../constants.dart';
import '../../controllers/login_controller.dart';
import '../../main.dart';
import '../../responsive.dart';

class LoginFields extends StatelessWidget {
  const LoginFields({super.key});

  @override
  Widget build(BuildContext context) {
    return GetX<LoginController>(
      init: LoginController(),
      builder: (controller) {
        return Form(
          key: controller.formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Hello Again!",
                style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Spacing.height(20),
              SizedBox(
                width: Responsive.isMobile(context) ? 250.sp : 100.sp,
                child: TextFormField(
                  controller: controller.userNameController,

                  decoration: InputDecoration(
                    hintText: 'Enter Your UserName',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(2.sp),
                      borderSide: BorderSide(color: Colors.black, width: 1.sp),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(2.sp),
                      borderSide: BorderSide(
                        color: AppColor.primaryColor,
                        width: 1,
                      ),
                    ),
                    prefixIcon: Icon(Icons.person),
                  ),
                  validator: (value) {
                    if (value!.isEmpty) {
                      return 'UserName is Required';
                    }
                    return null;
                  },
                  onFieldSubmitted: (value) {
                    if (controller.formKey.currentState?.validate() ?? false) {
                      controller.loginUser();
                    }
                  },
                ),
              ),
              Spacing.height(8),
              SizedBox(
                width: Responsive.isMobile(context) ? 250.sp : 100.sp,
                child: TextFormField(
                  obscureText: controller.isPass.value,

                  controller: controller.passwordController,
                  onFieldSubmitted: (value) {
                    if (controller.formKey.currentState?.validate() ?? false) {
                      controller.loginUser();
                    }
                  },

                  decoration: InputDecoration(
                    hintText: 'Enter Password',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(2.sp),
                      borderSide: BorderSide(color: Colors.black, width: 1.sp),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(2.sp),
                      borderSide: BorderSide(
                        color: AppColor.primaryColor,
                        width: 1,
                      ),
                    ),
                    prefixIcon: Icon(Icons.lock),
                    suffixIcon: Padding(
                      padding: EdgeInsets.only(right: 2.sp),
                      child: IconButton(
                        onPressed: () {
                          controller.changePass();
                        },
                        icon: Icon(
                          Icons.remove_red_eye_outlined,
                          color: controller.isPass.value
                              ? Colors.white
                              : AppColor.primaryColor,
                        ),
                      ),
                    ),
                  ),
                  validator: (value) {
                    if (value!.isEmpty) {
                      return 'Password is Required';
                    }
                    return null;
                  },
                ),
              ),
              Spacing.height(15),
              GestureDetector(
                onTap: () async {
                  if (controller.formKey.currentState?.validate() ?? false) {
                    controller.loginUser();
                  }
                },
                child: Container(
                  height: Responsive.isMobile(context) ? 25.sp : 12.sp,
                  alignment: Alignment.center,
                  width: Responsive.isMobile(context) ? 250.sp : 100.sp,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2.sp),
                    color: AppColor.primaryColor,
                  ),
                  child: Text(
                    "Login",
                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
