import 'package:flutter/material.dart';
import 'package:nextcloudapp/api/login_api.dart';
import 'package:nextcloudapp/components/default_values.dart';
import 'package:nextcloudapp/screens/welcome_screen.dart';
import 'package:nextcloudapp/service/snackbar_service.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  var _deviceHeight;
  var _deviceWidth;
  var urlController;
  var usernameController;
  var passwordController;

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  var checked = false;
  var obscureText = true;

  @override
  Widget build(BuildContext context) {
    SnackBarService.instance.buildContext = context;
    _deviceHeight = MediaQuery.of(context).size.height;
    _deviceWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Align(
        child: Container(
          height: _deviceHeight * 0.60,
          padding: EdgeInsets.symmetric(horizontal: _deviceWidth * 0.05),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              _inputField(),
              _passwordSaveField(),
              _signInField(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _inputField() {
    return SizedBox(
      height: _deviceHeight * 0.25,
      child: Form(
        key: _formKey,
        onChanged: () {
          _formKey.currentState?.save();
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextFormField(
              keyboardType: TextInputType.url,
              textInputAction: TextInputAction.next,
              cursorColor: Colors.white,
              style: TextStyle(
                color: Colors.black,
              ),
              onSaved: (_input) {
                setState(() {
                  urlController = _input!;
                });
              },
              validator: (_input) {
                return null;
              },
              decoration: const InputDecoration(
                hintText: "hosting URL",
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white)
                ),
                prefixIcon: Padding(
                  padding: EdgeInsets.all(defaultPadding),
                  child: Icon(Icons.computer_outlined),
                ),
              ),
            ),
            TextFormField(
              keyboardType: TextInputType.emailAddress,
              textInputAction: TextInputAction.next,
              style: TextStyle(
                color: Colors.black,
              ),
              onSaved: (_input) {
                setState(() {
                  usernameController = _input!;
                });
              },
              decoration: const InputDecoration(
                hintText: "username",
                prefixIcon: Padding(
                  padding: EdgeInsets.all(defaultPadding),
                  child: Icon(Icons.person),
                ),
              ),
            ),
            TextFormField(
              keyboardType: TextInputType.visiblePassword,
              textInputAction: TextInputAction.done,
              obscureText: obscureText,
              onSaved: (_input) {
                setState(() {
                  passwordController = _input!;
                });
              },
              cursorColor: primaryColor,
              decoration: InputDecoration(
                  hintText: "Password",
                  prefixIcon: const Padding(
                    padding: EdgeInsets.all(defaultPadding),
                    child: Icon(Icons.lock),
                  ),
                  suffixIcon: IconButton(
                    icon: Icon(
                        obscureText ? Icons.visibility : Icons.visibility_off),
                    onPressed: () {
                      setState(
                        () {
                          obscureText = !obscureText;
                        },
                      );
                    },
                  )),
            ),
          ],
        ),
      ),
    );
  }

  Widget _passwordSaveField() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Checkbox(
            value: checked,
            onChanged: (value) {
              setState(() {
                checked = value!;
              });
            }),
        const Text('Save Password'),
      ],
    );
  }

  Widget _signInField() {
    return ElevatedButton(
      onPressed: () {
        login(urlController.value.text, usernameController.value.text,
                passwordController.value.text)
            .then((
          status,
        ) {
          if (status.startsWith('successful')) {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return const WelcomeScreen();
                },
              ),
            );

            SnackBarService.instance.showSnackBarSuccess(status);
          } else {
            SnackBarService.instance.showSnackBarError(status);
          }
        });
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "sign in".toUpperCase(),
          ),
          const SizedBox(width: 10),
          const Icon(Icons.login)
        ],
      ),
    );
  }
}