import 'package:flutter/material.dart';
import 'package:pointycastle/api.dart';

class Signup extends StatelessWidget {
    const Signup({Key? key}) : super(key: key);

    static const String _title = 'Envelope';

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
                title: _title,
                home:  Scaffold(
                        backgroundColor: Colors.cyan,
                        appBar: AppBar(
                                title: null,
                                automaticallyImplyLeading: true,
                                //`true` if you want Flutter to automatically add Back Button when needed,
                                //or `false` if you want to force your own back button every where
                                leading: IconButton(icon: const Icon(Icons.arrow_back),
                                        //onPressed:() => Navigator.pop(context, false),
                                        onPressed:() => {
                                            Navigator.pop(context)
                                        }
                                )
                        ),
                        body: const SafeArea(
                                child: SignupWidget(),
                        )
                ),
                theme: ThemeData(
                        appBarTheme: const AppBarTheme(
                                backgroundColor: Colors.cyan,
                                elevation: 0,
                        ),
                        inputDecorationTheme: const InputDecorationTheme(
                                border: OutlineInputBorder(),
                                focusedBorder: OutlineInputBorder(),
                                labelStyle: TextStyle(
                                        color: Colors.white,
                                        fontSize: 30,
                                ),
                                filled: true,
                                fillColor: Colors.white,
                        ),

                ),
        );
    }
}

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

    @override
    State<SignupWidget> createState() => _SignupWidgetState();
}

class _SignupWidgetState extends State<SignupWidget> {
    final _formKey = GlobalKey<FormState>();

    TextEditingController usernameController = TextEditingController();
    TextEditingController passwordController = TextEditingController();
    TextEditingController passwordConfirmController = TextEditingController();

    @override
    Widget build(BuildContext context) {
        const TextStyle _inputTextStyle = TextStyle(fontSize: 18, color: Colors.black);

        final ButtonStyle _buttonStyle = ElevatedButton.styleFrom(
                primary: Colors.white,
                onPrimary: Colors.cyan,
                minimumSize: const Size.fromHeight(50),
                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                textStyle: const TextStyle(
                        fontSize: 20, 
                        fontWeight: FontWeight.bold,
                        color: Colors.red,
                        ),
        );

        return Center(
                child: Form(
                        key: _formKey,
                        child: Center(
                                child: Padding(
                                        padding: const EdgeInsets.all(15),
                                        child: Column(
                                                mainAxisAlignment: MainAxisAlignment.center,
                                                crossAxisAlignment: CrossAxisAlignment.center,
                                                children: [
                                                    const Text('Sign Up', style: TextStyle(fontSize: 35, color: Colors.white),),
                                                    const SizedBox(height: 30),
                                                    TextFormField(
                                                            controller: usernameController,
                                                            decoration: const InputDecoration(
                                                                    hintText: 'Username',
                                                            ),
                                                            style: _inputTextStyle,
                                                            // The validator receives the text that the user has entered.
                                                            validator: (value) {
                                                                if (value == null || value.isEmpty) {
                                                                    return 'Create a username';
                                                                }
                                                                return null;
                                                            },
                                                    ),
                                                    const SizedBox(height: 5),
                                                    TextFormField(
                                                            controller: passwordController,
                                                            obscureText: true,
                                                            enableSuggestions: false,
                                                            autocorrect: false,
                                                            decoration: const InputDecoration(
                                                                    hintText: 'Password',
                                                            ),
                                                            style: _inputTextStyle,
                                                            // The validator receives the text that the user has entered.
                                                            validator: (value) {
                                                                if (value == null || value.isEmpty) {
                                                                    return 'Enter a password';
                                                                }
                                                                return null;
                                                            },
                                                    ),
                                                    const SizedBox(height: 5),
                                                    TextFormField(
                                                            controller: passwordConfirmController,
                                                            obscureText: true,
                                                            enableSuggestions: false,
                                                            autocorrect: false,
                                                            decoration: const InputDecoration(
                                                                    hintText: 'Password',
                                                            ),
                                                            style: _inputTextStyle,
                                                            // The validator receives the text that the user has entered.
                                                            validator: (value) {
                                                                if (value == null || value.isEmpty) {
                                                                    return 'Confirm your password';
                                                                }
                                                                if (value != passwordController.text) {
                                                                    return 'Passwords do not match';
                                                                }
                                                                return null;
                                                            },
                                                    ),
                                                    const SizedBox(height: 5),
                                                    ElevatedButton(
                                                            style: _buttonStyle,
                                                            onPressed: () {
                                                                if (_formKey.currentState!.validate()) {
                                                                    ScaffoldMessenger.of(context).showSnackBar(
                                                                            const SnackBar(content: Text('Processing Data')),
                                                                    );

                                                                    signup(context);
                                                                }
                                                            },
                                                            child: const Text('Submit'),
                                                    ),
                                                ],
                                        )
                                )
                        )

                )
        );
    }
}

void signup(context) {
}