import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:prosappco/src/authentication/authentication_repository.dart';
import 'package:prosappco/src/components/photo_view.dart';

class DrawerMenu extends StatelessWidget {
  Reference? ref;
  String userName;
  String userPhoneNumber;
  String userCity;
  String userState;

  DrawerMenu({
    super.key,
    required this.ref,
    required this.userName,
    required this.userPhoneNumber,
    required this.userCity,
    required this.userState,
  });

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          Column(
            children: [
              Column(
                children: [
                  ListTile(
                    onTap: () {
                      if (ModalRoute.of(context)?.settings.name != '/profile') {
                        Navigator.pushNamed(context, '/profile');
                      } else {
                        Scaffold.of(context).openEndDrawer();
                      }
                    },
                    title: Text(userName,
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          userPhoneNumber,
                          style: const TextStyle(fontSize: 12),
                        ),
                        Text(
                          userCity,
                          style: const TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                    leading: ReferencePhoto(
                      ref: ref,
                      size: 55,
                      sizeCircle: 60,
                    ),
                    trailing: const Icon(Icons.keyboard_arrow_right,
                        color: Colors.black),
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 20, horizontal: 16),
                  ),
                ], //
              ),
              const Divider(height: 0, color: Colors.grey),
              Column(
                children: [
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.history,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Mis servicios',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {
                      if (ModalRoute.of(context)?.settings.name != '/profile') {
                        Navigator.pushNamed(context, '/profile');
                      } else {
                        Scaffold.of(context).openEndDrawer();
                      }
                    },
                    leading: const Icon(
                      Icons.person_outline,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Mi perfil',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.construction_outlined,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Configuración',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.question_mark_rounded,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Soporte',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.messenger_outline,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Mensajes',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  Builder(builder: (BuildContext context) {
                    return ListTile(
                      onTap: () {
                        if (ModalRoute.of(context)?.settings.name !=
                            '/welcome') {
                          Navigator.pushNamed(context, '/welcome');
                        } else {
                          Scaffold.of(context).openEndDrawer();
                        }
                      },
                      trailing: const Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.white,
                      ),
                      title: const Text(
                        'Solicitar servicio',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 17,
                            fontWeight: FontWeight.bold),
                      ),
                      tileColor: const Color(0xFF2BA4EC),
                      contentPadding: const EdgeInsets.symmetric(
                          vertical: 5, horizontal: 16),
                    );
                  }),
                ],
              ),
              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]),
                  ),
                ],
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 200),
            child: Row(
              children: [
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    AuthenticationRepository.instance.logout();
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    shape: const CircleBorder(),
                    elevation: 3,
                    minimumSize: const Size(45, 45),
                  ),
                  child: const Icon(
                    Icons.logout_outlined,
                    color: Colors.red,
                    size: 35,
                  ),
                ),
                const SizedBox(width: 5),
                ElevatedButton(
                  onPressed: () {
                    if (userState == 'pendiente' || userState.isEmpty) {
                      Navigator.pushNamed(context, '/profesionalProfile');
                    } else if (userState == 'revision') {
                      Navigator.pushNamed(context, '/profesionalRevision');
                    }
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF2BA4EC),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                    ),
                    elevation: 0,
                    minimumSize: const Size(200, 45),
                  ),
                  child: const Text(
                    'Modo profesional',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}