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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                headerTextTankGuru(),
                const SizedBox(height: 5),
                headerTextDescription(),
                const SizedBox(height: 10),
                loadingImage(),
                inputFields(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  //the structure of the login page
  SizedBox loadingImage() {
    return SizedBox(
      width: 300,
      height: 300,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(40),
        child: Image.asset('lib/images/gasolineGuru.jpg', fit: BoxFit.cover),
      ),
    );
  }

  Text headerTextTankGuru() {
    return Text(
      'Tank GURU',
      style: TextStyle(
        fontSize: 35,
        fontWeight: FontWeight.bold,
        color: Colors.teal[600],
        letterSpacing: 2,
      ),
    );
  }

  Text headerTextDescription() {
    return Text(
      'Das ultimative Tanken',
      style: TextStyle(fontSize: 20, color: Colors.grey[300]),
    );
  }

  Widget inputFields() {
    return Obx(
      () => SizedBox(
        width: 300,
        child: Form(
          key: controller.formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: [
              SizedBox(height: 20),
              TextFormField(
                validator: (value) => controller.validateEmail(value),
                keyboardType: TextInputType.emailAddress,
                controller: controller.emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 20),
              TextFormField(
                validator: (value) => controller.validatePassword(value),
                keyboardType: TextInputType.visiblePassword,
                controller: controller.passwordController,
                decoration: InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
                obscureText: true,
              ),
              if (controller.isVisible.value) ...[
                SizedBox(height: 20),
                TextFormField(
                  validator: (value) => controller.validateName(value),
                  keyboardType: TextInputType.name,
                  controller: controller.nameController,
                  decoration: InputDecoration(
                    labelText: 'Name',
                    border: OutlineInputBorder(),
                  ),
                ),
              ],
              SizedBox(height: 20),
              SizedBox(
                width: 300,
                child: ElevatedButton(
                  onPressed: () {
                    controller.isVisible.value == false
                        ? controller.login()
                        : controller.register();
                  },
                  child: controller.isVisible.value == false
                      ? Text('Login')
                      : Text('Registrieren'),
                ),
              ),
              SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Noch kein Konto? '),
                  GestureDetector(
                    onTap: () {
                      if (!controller.isVisible.value) {
                        controller.isVisible.value = true;
                      } else {
                        controller.isVisible.value = false;
                      }
                    },
                    child: controller.isVisible.value == false
                        ? Text(
                            'Sign Up',
                            style: TextStyle(
                              color: Colors.teal,
                              fontWeight: FontWeight.bold,
                              decoration: TextDecoration.underline,
                            ),
                          )
                        : Text(
                            'Sign In',
                            style: TextStyle(
                              color: Colors.teal,
                              fontWeight: FontWeight.bold,
                              decoration: TextDecoration.underline,
                            ),
                          ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}