import 'package:flutter/material.dart';
import 'package:prosappco/src/authentication/authentication_repository.dart';

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

  @override
  State<WelcomeScreen> createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      drawer: Drawer(
        child: Column(
          children: [
            Container(
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: 100,
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 30),
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Colors.grey[100],
                    child: Row(
                      children: [
                        Icon(Icons.history),
                        SizedBox(width: 10),
                        Text('Mis servicios'),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Colors.grey[100],
                    child: Row(
                      children: [
                        Icon(Icons.person_outline),
                        SizedBox(width: 10),
                        Text("Mi perfil"),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Colors.grey[100],
                    child: Row(
                      children: [
                        Icon(Icons.construction_outlined),
                        SizedBox(width: 10),
                        Text(
                          "Configuración",
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Colors.grey[100],
                    child: Row(
                      children: [
                        Icon(Icons.question_mark_rounded),
                        SizedBox(width: 10),
                        Text("Soporte"),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Colors.grey[100],
                    child: Row(
                      children: [
                        Icon(Icons.messenger_outline),
                        SizedBox(width: 10),
                        Text("Mensajes"),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    width: double.infinity,
                    color: Color(0xFF2BA4EC),
                    child: Row(
                      children: [
                        Text(
                          "Solicitar servicio",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 15,
                          ),
                        ),
                        SizedBox(width: 105),
                        Icon(
                          Icons.keyboard_arrow_right_outlined,
                          color: Colors.white,
                        ),
                      ],
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'Prosapp',
                        style: TextStyle(fontSize: 10, color: Colors.grey[700]),
                      ),
                      Padding(
                        padding:
                            const EdgeInsets.only(top: 7, left: 3, right: 3),
                        child: Text(
                          '®',
                          style:
                              TextStyle(fontSize: 25, color: Colors.grey[700]),
                        ),
                      ),
                      Text(
                        'todos los derechos reservados',
                        style: TextStyle(fontSize: 10, color: Colors.grey[700]),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(top: 120),
                child: Row(
                  children: [
                    SizedBox(width: 10),
                    ElevatedButton(
                      onPressed: () {
                        AuthenticationRepository.instance.logout();
                      },
                      child: Transform.rotate(
                        angle: 180 * 3.1416 / 180,
                        child: Icon(
                          Icons.logout_outlined,
                          color: Colors.red,
                          size: 35,
                        ),
                      ),
                      style: ElevatedButton.styleFrom(
                        primary: Colors.white,
                        shape: CircleBorder(),
                        elevation: 3,
                        minimumSize: Size(45, 45),
                      ),
                    ),
                    SizedBox(width: 5),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        'Modo profesional',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 15,
                        ),
                      ),
                      style: ElevatedButton.styleFrom(
                        primary: Color(0xFF2BA4EC),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50),
                        ),
                        elevation: 0,
                        minimumSize: Size(200, 45),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xFFD6F4FF),
      body: Stack(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 130),
            width: double.infinity,
            height: 800,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(50),
                    topLeft: Radius.circular(50))),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20, left: 30),
            child: Align(
              alignment: Alignment.topCenter,
              child: Row(
                children: [
                  Builder(
                    builder: (context) => ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        primary: Colors.white,
                        shape: CircleBorder(),
                        elevation: 3,
                        minimumSize: Size(50, 50),
                      ),
                      child: Icon(
                        Icons.menu,
                        color: Colors.black,
                        size: 30,
                      ),
                      onPressed: () {
                        Scaffold.of(context).openDrawer();
                      },
                    ),
                  ),
                  SizedBox(
                    width: 150,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 50),
                    child: const Image(
                      image: AssetImage('images/logo_prosapp.png'),
                      width: 120,
                      height: 50,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 170),
            child: Align(
              alignment: Alignment.topCenter,
              child: Text(
                'Bienvenido',
                style: TextStyle(
                  color: Color(0xFF262626),
                  fontSize: 38.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 280, left: 50, right: 50),
            child: Column(children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 40),
                child: Center(
                    child: ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    'Solicitar un servicio',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF2BA4EC),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                    ),
                    elevation: 0,
                    minimumSize: Size(260, 60),
                  ),
                )),
              ),
            ]),
          ),
        ],
      ),
    ));
  }
}
