import 'package:go_router/go_router.dart';
import 'package:proto_portal/scraper.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:flutter_svg/flutter_svg.dart';

class LoginPage extends StatelessWidget {

  static GoRoute route = GoRoute(
    path: "/login",
    builder: (context, state) => LoginPage()
  );

  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  InputKey _usernameKey = InputKey("username");
  InputKey _passwordKey = InputKey("password");
  CheckboxState rememberMe = CheckboxState.checked;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      child: Center(
        child: Form(
          key: _formKey,
          onSubmit: (context, values) async {

            try {

              await GtiAuth.of(context).login(
                values[_usernameKey] as String,
                values[_passwordKey] as String,
                remember: rememberMe == CheckboxState.checked
              );

              GoRouter.of(context).go("/");

            } catch (e) {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('Error logging in'),
                    content: Text("The username or password provided is incorrect."),
                    actions: [
                      PrimaryButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: const Text('Close'),
                      ),
                    ],
                  );
                },
              );
            }
          },
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [

              Container(
                height: 50,
                width: double.infinity,
                alignment: Alignment.center,
                child: SvgPicture.asset(
                  "assets/logo.svg",
                  alignment: AlignmentGeometry.center,
                  // width: 400,
                  colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
                ),
              ),

              const SizedBox(height: 12),

              Text(
                "Coordination Portal"
              ).h4.center(),

              const SizedBox(height: 32),

              FormField(
                label: Text("Username"),
                key: _usernameKey,
                child: TextField(

                ),
                validator: ConditionalValidator((value) {
                  return value != null && (value as String).isNotEmpty;
                }, message: "Username cannot be empty"),
              ),

              const SizedBox(height: 16),

              FormField(
                label: Text("Password"),
                key: _passwordKey,
                child: TextField(
                  obscureText: true,
                ),
                validator: ConditionalValidator((value) {
                  return value != null && (value as String).isNotEmpty;
                }, message: "Password cannot be empty"),
              ),

              const SizedBox(height: 24),

              Checkbox(
                state: rememberMe,
                onChanged: null,
                trailing: Text("Remember me"),
              ),

              const SizedBox(height: 24),

              SizedBox(
                width: double.infinity,
                child: SubmitButton(
                  child: Text("Login"),
                  loadingTrailing: CircularProgressIndicator(),
                ),
              )


            ],
          ),
        ),
      ).withPadding(
        all: 16,
      ),
    );
  }

}