prosappco/lib/src/components/drawer_professional.dart

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

class DrawerProfessional extends StatefulWidget {
  Reference? ref;
  String userName;
  String userPhoneNumber;
  String userCity;
  String userState;

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

  @override
  State<DrawerProfessional> createState() => _DrawerProfessionalState();
}

class _DrawerProfessionalState extends State<DrawerProfessional> {
  final uid = AuthenticationRepository.instance.getCurrentUserUid();
  UserModel? user;

  @override
  void initState() {
    super.initState();

    if (user == null) {
      UserModel.getUser(uid.toString()).then(
        (UserModel s) => setState(() => user = s),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final User? currentUser = FirebaseAuth.instance.currentUser;

    return Drawer(
      child: Container(
        color: const Color(0xFFE9F9FF),
        child: Column(
          children: [
            Container(
              color: Colors.white,
              child: Column(
                children: [
                  ListTile(
                    onTap: () {},
                    title: Text(user?.name ?? '',
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          currentUser?.phoneNumber ?? '',
                          style: const TextStyle(fontSize: 12),
                        ),
                        Text(
                          user?.city ?? '',
                          style: const TextStyle(fontSize: 12),
                        ),
                      ],
                    ),
                    leading: ReferencePhoto(
                      ref: user?.photo,
                      size: 55,
                      sizeCircle: 60,
                    ),
                    trailing: const Icon(Icons.keyboard_arrow_right,
                        color: Colors.black),
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 20, horizontal: 16),
                  ),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.3),
                    spreadRadius: 1,
                    blurRadius: 3,
                    offset: const Offset(0, 0), // changes position of shadow
                  ),
                ],
              ),
              child: Divider(
                height: 0,
                color: Colors.grey[300],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.history,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Mis servicios',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.person_outline,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Perfil profesional',
                      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),
                    ),
                  ),
                  ListTile(
                    onTap: () {},
                    leading: const Icon(
                      Icons.calendar_month,
                      color: Colors.black,
                    ),
                    title: const Text(
                      'Calendario',
                      style: TextStyle(fontSize: 15),
                    ),
                  ),
                  Builder(builder: (BuildContext context) {
                    return Container(
                      color: const Color(0xFF2BA4EC),
                      child: ListTile(
                        onTap: () {},
                        trailing: const Icon(
                          Icons.keyboard_arrow_right,
                          color: Colors.white,
                        ),
                        title: const Text(
                          'Solicitudes',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                              fontWeight: FontWeight.bold),
                        ),
                        contentPadding: const EdgeInsets.symmetric(
                            vertical: 5, horizontal: 16),
                      ),
                    );
                  }),
                  Container(
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 3,
                          offset:
                              const Offset(0, 2), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Container(
                      color: Colors.white,
                      child: ListTile(
                        onTap: () {},
                        trailing: const Icon(Icons.keyboard_arrow_right,
                            color: Colors.black),
                        title: const Text(
                          'Reputación',
                          style: TextStyle(color: Colors.black),
                        ),
                        subtitle: Row(
                          children: [
                            RatingBar.builder(
                              initialRating: user?.score?.average ?? 0,
                              minRating: 1,
                              direction: Axis.horizontal,
                              allowHalfRating: true,
                              itemCount: 5,
                              itemSize: 25,
                              maxRating: 5,
                              itemPadding:
                                  const EdgeInsets.symmetric(horizontal: 0),
                              itemBuilder: (context, _) => const Icon(
                                Icons.star,
                                color: Color(0xFF2BA4EC),
                              ),
                              onRatingUpdate: (rating) {},
                              ignoreGestures: true,
                            ),
                            const SizedBox(width: 5),
                            Text(
                                '(${user?.score?.total.toString()})  ${user?.score?.average.toString()}'),
                          ],
                        ),
                      ),
                    ),
                  ),
                  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]),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            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: () {
                    Navigator.pushReplacementNamed(context, '/welcome');
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF2BA4EC),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                    ),
                    elevation: 0,
                    minimumSize: const Size(200, 45),
                  ),
                  child: const Text(
                    'Modo usuario',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}