import 'package:flutter/material.dart';
import 'package:slothmu/api/user.dart';

class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Padding(
        padding: EdgeInsets.all(24),
        child: LoginForm(),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  const LoginForm({Key? key}) : super(key: key);

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      onChanged: () {
        formKey.currentState!.validate();
      },
      key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          const Text("Welcome!", style: TextStyle(fontSize: 64)),
          TextFormField(
            decoration: const InputDecoration(
              labelText: "user id",
              hintText: "user@example.com",
              icon: Icon(Icons.person),
              prefixText: "@",
            ),
            autofocus: true,
            validator: (value) {
              if (value!.isEmpty || !isValidUsername(name: value)) {
                return "Sorry, this user id doesn't look quite right...";
              } else {
                return null;
              }
            },
          ),
          TextButton.icon(
              onPressed: () {
                final isValid = formKey.currentState!.validate();
              },
              icon: Icon(Icons.login),
              label: Text("authorize in browser"))
        ],
      ),
    );
  }
}