import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
  final _formKey = GlobalKey<FormState>();
  static const dialogName = "Sign Up";
  @override
  Widget build(BuildContext context) => AlertDialog(
        title: const Text(dialogName),
        content: SizedBox(
          width: 420,
          height: 280,
          child: Form(
            key: _formKey,
            child: Center(
                child: Column(children: [
              TextFormField(
                autofocus: true,
                decoration: const InputDecoration(
                  hintText: "Enter your username",
                  icon: Icon(Icons.account_circle),
                  label: Text("Username"),
                ),
                cursorWidth: 1,
                cursorHeight: 18,
                cursorRadius: const Radius.circular(10),
              ),
              TextFormField(
                autofocus: true,
                decoration: const InputDecoration(
                  hintText: "Enter your email",
                  icon: Icon(Icons.email),
                  label: Text("Email"),
                ),
                cursorWidth: 1,
                cursorHeight: 18,
                cursorRadius: const Radius.circular(10),
              ),
              TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  hintText: "Enter your password",
                  icon: Icon(Icons.password),
                  label: Text("Password")
                ),
                cursorWidth: 1,
                cursorHeight: 18,
                cursorRadius: const Radius.circular(10),
              ),
              TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  hintText: "Verify your password",
                  icon: Icon(Icons.password),
                  label: Text("Confirm Password")
                ),
                cursorWidth: 1,
                cursorHeight: 18,
                cursorRadius: const Radius.circular(10),
              ),
            ])))),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              // Validate returns true if the form is valid, or false otherwise.
              if (_formKey.currentState!.validate()) {
                // If the form is valid, display a snackbar. Up the real world,
                // you'd often call a server or save the information in a database.
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(_formKey.toString())),
                );
              }
            },
            child: const Text('OK'),
          ),
        ],
      );
}