Sidebar.js

"use client";

import { Box, Flex, IconButton, Text, Stack, useColorModeValue, Link, Icon } from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { RiHome2Line, RiUser3Line, RiCalendar2Line, RiFileTextLine, RiSettings3Line, RiPhoneLine, RiCarLine, RiDashboardLine, RiAdminLine } from 'react-icons/ri';

const Sidebar = ({ userRole }) => {
  const [isOpen, setIsOpen] = useState(true);
  const bgColor = useColorModeValue('white', 'gray.800');
  const textColor = useColorModeValue('gray.800', 'white');
  const router = useRouter();

  console.log('userRole recebido no Sidebar:', userRole);

  const defaultRoutes = {
    SuperAdmin: '/dashboard-superadmin',
    Gestor: '/dashboard-gestor',
    Telefonista: '/dashboard-telefonista',
    'Telefonista Supervisora': '/dashboard-telefonista-supervisora',
    Tecnico: '/dashboard-tecnico',
  };

  const menuItems = {
    SuperAdmin: [
      { name: 'Home', icon: RiDashboardLine, path: defaultRoutes.SuperAdmin },
      { name: 'Gestores', icon: RiAdminLine, path: '/cadastro-gestores' },
      { name: 'Empresas', icon: RiUser3Line, path: '/concessionarias' },
      { name: 'Super Admins', icon: RiAdminLine, path: '/cadastro-superadmin' },
      { name: 'Relatórios', icon: RiFileTextLine, path: '/cadastro-relatorios' },
    ],
    Gestor: [
      { name: 'Home', icon: RiDashboardLine, path: defaultRoutes.Gestor },
      { name: 'Telefonistas', icon: RiPhoneLine, path: '/cadastro-telefonistas' },
      { name: 'Técnicos', icon: RiSettings3Line, path: '/cadastro-tecnicos' },
      { name: 'Agendamentos', icon: RiCalendar2Line, path: '/cadastro-agendamentos' },
      { name: 'Clientes', icon: RiUser3Line, path: '/cadastro-clientes' },
      { name: 'Veículos', icon: RiCarLine, path: '/cadastro-veiculos' },
      { name: 'Relatórios', icon: RiFileTextLine, path: '/cadastro-relatorios' },
    ],
    Telefonista: [
      { name: 'Home', icon: RiDashboardLine, path: defaultRoutes.Telefonista },
      { name: 'Agendamentos', icon: RiCalendar2Line, path: '/cadastro-agendamentos' },
      { name: 'Clientes', icon: RiUser3Line, path: '/cadastro-clientes' },
      { name: 'Veículos', icon: RiCarLine, path: '/cadastro-veiculos' },
      { name: 'Relatórios', icon: RiFileTextLine, path: '/cadastro-relatorios' },
    ],
    'Telefonista Supervisora': [
      { name: 'Home', icon: RiDashboardLine, path: defaultRoutes['Telefonista Supervisora'] },
      { name: 'Agendamentos', icon: RiCalendar2Line, path: '/cadastro-agendamentos' },
      { name: 'Telefonistas', icon: RiPhoneLine, path: '/cadastro-telefonistas' },
      { name: 'Técnicos', icon: RiSettings3Line, path: '/cadastro-tecnicos' },
      { name: 'Clientes', icon: RiUser3Line, path: '/cadastro-clientes' },
      { name: 'Veículos', icon: RiCarLine, path: '/cadastro-veiculos' },
      { name: 'Configurações', icon: RiSettings3Line, path: '/cadastro-configuracoes' },
      { name: 'Relatórios', icon: RiFileTextLine, path: '/cadastro-relatorios' },
    ],
    Tecnico: [
      { name: 'Home', icon: RiDashboardLine, path: defaultRoutes.Tecnico },
      { name: 'Meus Agendamentos', icon: RiCalendar2Line, path: '/meus-agendamentos' },
      { name: 'Clientes', icon: RiUser3Line, path: '/cadastro-clientes' },
      { name: 'Veículos', icon: RiCarLine, path: '/cadastro-veiculos' },
      { name: 'Relatórios', icon: RiFileTextLine, path: '/cadastro-relatorios' },
    ],
  };

  const items = userRole ? menuItems[userRole] || [] : [];
  console.log('Itens a renderizar no Sidebar:', items);

  return (
    <Box
      w={{ base: isOpen ? '100px' : '60px', md: isOpen ? '200px' : '60px' }}
      h="calc(100vh - 60px)" // Ajuste a altura para não se sobrepor à Topbar
      bg={bgColor}
      boxShadow="md"
      position="fixed"
      zIndex={800} // Ajuste o zIndex para um valor menor
      transition="width 0.3s"
      mt="20px" // Adicione marginTop para não se sobrepor à Topbar
    >
      <Flex align="center" p={2} borderBottom="1px" borderColor="gray.200">
        <IconButton
          icon={<HamburgerIcon />}
          onClick={() => setIsOpen(!isOpen)}
          variant="ghost"
          aria-label="Toggle Sidebar"
          size="sm"
        />
        {isOpen && <Text ml={2} fontWeight="bold" fontSize="lg">Alpha Project</Text>}
      </Flex>
      <Stack spacing={2} p={2}>
        {items.map((item, index) => (
          <Link
            key={index}
            color={textColor}
            fontSize="sm"
            cursor="pointer"
            _hover={{ color: 'blue.500' }}
            onClick={() => router.push(item.path)}
            display="flex"
            alignItems="center"
            p={2}
            borderRadius={4}
            _hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
          >
            <Icon as={item.icon} mr={isOpen ? 2 : 0} boxSize={6} />
            {isOpen && <Text>{item.name}</Text>}
          </Link>
        ))}
      </Stack>
    </Box>
  );
};

export default Sidebar;