import 'package:prosapp_web_app/models/pro_state.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/professional_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
import 'package:prosapp_web_app/providers/sidemenu_provider.dart';
import 'package:prosapp_web_app/router/router.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/services/notifications_service.dart';
import 'package:prosapp_web_app/ui/shared/widgets/menu_item.dart';
import 'package:prosapp_web_app/ui/shared/widgets/text_separator.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'package:prosapp_web_app/ui/shared/widgets/logo.dart';
import 'package:provider/provider.dart';

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

  void navigateTo(String routeName) {
    NavigationService.replaceTo(routeName);
    SideMenuProvider.closeMenu();
  }

  @override
  Widget build(BuildContext context) {
    final sideMenuProvider = Provider.of<SideMenuProvider>(context);
    final authProvider = Provider.of<AuthProvider>(context, listen: false);
    final professionalProvider = Provider.of<ProfessionalProvider>(context);

    return Container(
      width: 200,
      height: double.infinity,
      decoration: buildBoxDecoration(),
      child: ListView(
        physics: const ClampingScrollPhysics(),
        children: [
          const Logo(),
          const SizedBox(height: 50),
          if (professionalProvider.isProModeActive) ...[
            const TextSeparator(text: 'Profesional'),
            MenuItem(
                isActive:
                    sideMenuProvider.currentPage == Flurorouter.profileRoute ||
                        sideMenuProvider.currentPage ==
                            Flurorouter.professionalProfileRoute,
                text: 'Perfil',
                icon: Icons.person_outlined,
                onPressed: () {
                  if (professionalProvider.isProModeActive) {
                    navigateTo(Flurorouter.professionalProfileRoute);
                  } else {
                    navigateTo(Flurorouter.profileRoute);
                  }
                }

                // () => navigateTo(Flurorouter.profileRoute),
                ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == 
                  Flurorouter.professionalServicesRequestsRoute,
              text: 'Mis solicitudes',
              icon: Icons.room_service_outlined,
              onPressed: () => {
                Provider.of<ServicesProvider>(context, listen: false)
                    .clearServices(),
                navigateTo(Flurorouter.professionalServicesRequestsRoute)
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage ==
                  Flurorouter.professionalServicesRoute,
              text: 'Mis servicios',
              icon: Icons.list,
              onPressed: () => {
                Provider.of<ServicesProvider>(context, listen: false)
                    .clearServices(),
                navigateTo(Flurorouter.professionalServicesRoute)
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage ==
                  Flurorouter.professionalServicesHistoryRoute,
              text: 'Historial',
              icon: Icons.restore_outlined,
              onPressed: () => {
                Provider.of<ServicesProvider>(context, listen: false)
                    .clearServices(),
                navigateTo(Flurorouter.professionalServicesHistoryRoute)
              },
            ),
            MenuItem(
              text: 'Calendario',
              icon: Icons.calendar_month_outlined,
              onPressed: () =>
                  navigateTo(Flurorouter.professionalCalendarRoute),
            ),
          ] else ...[
            const TextSeparator(text: 'Usuario'),
            MenuItem(
              isActive:
                  sideMenuProvider.currentPage == Flurorouter.profileRoute,
              text: 'Perfil',
              icon: Icons.person_outlined,
              onPressed: () => navigateTo(Flurorouter.profileRoute),
            ),
            MenuItem(
              isActive:
                  sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
              text: 'Solicitar',
              icon: Icons.room_service_outlined,
              onPressed: () => navigateTo(Flurorouter.dashboardRoute),
            ),
            MenuItem(
              isActive:
                  sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
              text: 'Mis servicios',
              icon: Icons.list,
              onPressed: () => {
                Provider.of<ServicesProvider>(context, listen: false)
                    .clearServices(),
                navigateTo(Flurorouter.userServicesRoute)
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage ==
                  Flurorouter.userServicesHistoryRoute,
              text: 'Historial',
              icon: Icons.restore_outlined,
              onPressed: () => {
                Provider.of<ServicesProvider>(context, listen: false)
                    .clearServices(),
                navigateTo(Flurorouter.userServicesHistoryRoute)
              },
            ),
            MenuItem(
              isActive:
                  sideMenuProvider.currentPage == Flurorouter.supportRoute,
              text: 'Soporte',
              icon: Icons.support_agent_outlined,
              onPressed: () => navigateTo(Flurorouter.supportRoute),
            ),
          ],
          Material(
            color: Colors.blueAccent,
            child: InkWell(
              onTap: () {
                if (authProvider.user?.picture == '' ||
                    authProvider.user?.city == '' ||
                    authProvider.user?.name == null ||
                    authProvider.user?.name == '' ||
                    authProvider.user?.email == '') {
                  NotificationsService.showSnackBarError(
                      'Primero completa tu perfil');
                  navigateTo(Flurorouter.profileRoute);

                  return;
                }

                if (authProvider.user?.proState == ProState.active) {
                  professionalProvider.toggleProMode();

                  if (professionalProvider.isProModeActive) {
                    navigateTo(Flurorouter.professionalServicesRequestsRoute);
                  } else {
                    navigateTo(Flurorouter.dashboardRoute);
                  }
                } else {
                  navigateTo(Flurorouter.requestProfessionalRoute);
                }
              },
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10,
                ),
                child: MouseRegion(
                  cursor: SystemMouseCursors.click,
                  child: Text(
                    'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
                    style: GoogleFonts.roboto(
                        color: Colors.white.withOpacity(0.8)),
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 50),
          const TextSeparator(text: 'Salir'),
          MenuItem(
            text: 'Cerrar sesión',
            icon: Icons.exit_to_app_outlined,
            onPressed: () => authProvider.logout(),
          ),
        ],
      ),
    );
  }

  BoxDecoration buildBoxDecoration() => const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xff092044),
            Color(0xff092042),
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 10,
          ),
        ],
      );
}