import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../controllers/login_controller.dart';

class LoginPage extends GetView<LoginController> {
  static const String namedRoute = '/login';
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    var loginCtrl = controller;
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Container(
              width: Get.width * 0.6,
              padding: const EdgeInsets.all(40.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: const Color.fromARGB(64, 189, 189, 189),
              ),
              child: Column(
                children: [
                  Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Colors.white.withAlpha(150),
                      borderRadius: BorderRadius.circular(100),
                    ),
                    child: Obx(
                      () => loginCtrl.isLoginScreen.value
                          ? IconButton(
                              onPressed: () => loginCtrl.logout(),
                              icon: Icon(Icons.login, size: 80),
                              color: Colors.pink.shade700,
                            )
                          : IconButton(
                              onPressed: () => loginCtrl.logout(),
                              icon: Icon(Icons.app_registration, size: 80),
                              color: Colors.pink.shade700,
                            ),
                    ),
                  ),
                  SizedBox(height: 80),
                  Obx(
                    () => loginCtrl.isLoginScreen.value
                        ? Text(
                            loginCtrl.szHeaderLogin.value,
                            style: Theme.of(context).textTheme.headlineMedium,
                          )
                        : Text(
                            loginCtrl.szHeaderSignin.value,
                            style: Theme.of(context).textTheme.headlineMedium,
                          ),
                  ),
                  SizedBox(height: 40),
                  Form(
                    key: loginCtrl.loginFormKey,
                    child: Column(
                      children: [
                        Obx(
                          () => loginCtrl.isLoginScreen.value
                              ? const SizedBox.shrink()
                              : _nameFormField(loginCtrl),
                        ),
                        SizedBox(height: 20),
                        _emailFormField(loginCtrl),
                        SizedBox(height: 20),
                        _passwdFormField(loginCtrl),
                        SizedBox(height: 40),
                        ElevatedButton(
                          onPressed: () {
                            // Handle login or signin action
                            loginCtrl.logOrSignIn();
                          },
                          child: Obx(
                            () => loginCtrl.isLoginScreen.value
                                ? const Text('Login')
                                : const Text('Signin'),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 10),
                  Obx(
                    () => loginCtrl.isLoginScreen.value
                        ? TextButton(
                            child: Text(
                              'To Signin',
                              style: TextStyle(color: Colors.blue.shade500),
                            ),
                            onPressed: () {
                              loginCtrl.switchScreen();
                            },
                          )
                        : TextButton(
                            child: Text(
                              'To Login',
                              style: TextStyle(color: Colors.blue.shade500),
                            ),
                            onPressed: () {
                              loginCtrl.switchScreen();
                            },
                          ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  // Email Form Field
  TextFormField _emailFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.emailAddress,
      controller: loginCtrl.emailController,
      decoration: _formFieldDecoration('Email*'),
    );
  }

  // Password Form Field
  TextFormField _passwdFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.visiblePassword,
      controller: loginCtrl.passwordController,
      decoration: _formFieldDecoration('Password*'),
      obscureText: true,
    );
  }

  // Name Form Field
  TextFormField _nameFormField(LoginController loginCtrl) {
    return TextFormField(
      keyboardType: TextInputType.name,
      controller: loginCtrl.nameController,
      decoration: _formFieldDecoration('Name*'),
    );
  }

  //Form Field Decoration
  InputDecoration _formFieldDecoration(String labelText) {
    return InputDecoration(
      labelText: labelText,
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.pink.shade700),
        borderRadius: BorderRadius.circular(5.0),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.pink.shade400),
        borderRadius: BorderRadius.circular(5.0),
      ),
    );
  }
}