import 'package:flutter/material.dart';
import 'package:namer_app/footer.dart';
import 'package:namer_app/header.dart';
import 'package:namer_app/service/signup_serv.dart';

class SignupPage extends StatelessWidget {
  const SignupPage({super.key});

  @override
  Widget build(BuildContext context) {
    var usernameController = TextEditingController();
    final nameController = TextEditingController();
    final passwordController = TextEditingController();
    return Scaffold(
      appBar: CustomAppbar(),
      backgroundColor: Colors.white,
      body: Form(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Center(
                child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'SIGN UP',
                  style: TextStyle(color: Colors.black, fontSize: 48),
                ),
              ],
            )),
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: 396,
                    child: TextFormField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12)),
                              borderSide: BorderSide(color: Colors.black)),
                          enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12)),
                              borderSide: BorderSide(color: Colors.black)),
                          labelText: 'Enter Username',
                          labelStyle: TextStyle(color: Colors.black),
                          filled: true,
                          fillColor: Colors.white.withOpacity(0.25)),
                      cursorColor: Colors.black,
                      style: TextStyle(color: Colors.black),
                      controller: usernameController,
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SizedBox(
                    width: 396,
                    child: TextFormField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12)),
                              borderSide: BorderSide(color: Colors.black)),
                          enabledBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.all(Radius.circular(12)),
                              borderSide: BorderSide(color: Colors.black)),
                          labelText: 'Enter Name',
                          labelStyle: TextStyle(color: Colors.black),
                          filled: true,
                          fillColor: Colors.white.withOpacity(0.25)),
                      cursorColor: Colors.black,
                      style: TextStyle(color: Colors.black),
                      controller: nameController,
                    ),
                  ),
                ),
                SizedBox(
                  width: 396,
                  child: TextFormField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(12)),
                            borderSide: BorderSide(color: Colors.black)),
                        enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(12)),
                            borderSide: BorderSide(color: Colors.black)),
                        labelText: 'Enter Password',
                        labelStyle: TextStyle(color: Colors.black),
                        filled: true,
                        fillColor: Colors.white.withOpacity(0.25)),
                    cursorColor: Colors.black,
                    style: TextStyle(color: Colors.black),
                    
                    controller: passwordController,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: SizedBox(
                    width: 396,
                    height: 61,
                    child: ElevatedButton(
                      onPressed: () => signup(context, 
                      // formData
                      usernameController.text,
                      passwordController.text,
                      nameController.text
                      ),
                      style: ElevatedButton.styleFrom(//todo putih lage
                        backgroundColor: Colors.black, 
                        side: BorderSide(color: Colors.white),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12.0),
                        ),
                      ),
                      child: Text(
                        'Save',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      bottomNavigationBar: Footer(),
    );
     
  }

 
}