import { Avatar, Divider, Flex, Heading, Text } from '@chakra-ui/react';
import NavItem from './NavItem';
import { ROUTES } from '../../constants/paths';
import { useQueryClient } from 'react-query';
import { EVENT_NAMES } from '../../constants/define';
import { useAuth } from '../../hooks'; 

const SideBar = ({ currentPath, navSize, ...rest }) => {
  const auth = useAuth();
  const authUser = auth.user || { permissions: [] };
  const queryClient = useQueryClient();
  const me = queryClient.getQueryData([EVENT_NAMES.ESSENTIAL.RETRIEVE])?.me;
  const { firstName, lastName, roles } = me || { firstName: '', lastName: '', roles: [] };

  // Chuyển đổi permissions của người dùng thành một mảng các chuỗi viết thường
  const userPermissions = authUser?.permission?.map((permission) => permission.toLowerCase());

  // Lấy ra một mảng phẳng của các route để sử dụng trong sidebar
  const flatRoutes = Object.values(ROUTES.DASHBOARD).flatMap((route) =>
    route.ROOT ? Object.values(route) : route
  );

  // Filter routes dựa trên quyền của người dùng
  const filteredRoutes = flatRoutes.filter((route) => {
    // In ra giá trị của quyền của route và quyền của người dùng để so sánh
    // console.log('Route Permissions:', route.permissions);
    // console.log('User Permissions:', userPermissions);

    return (
      route.isShowInSideBar &&
      (!route.permissions || route.permissions.some((permission) => userPermissions?.includes(permission.toLowerCase())))
    );
  });

  return (
    <Flex
      pos="sticky"
      h="100%"
      boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)"
      flexDir="column"
      justifyContent="space-between"
      {...rest}
    >
      <Flex flexDir="column">
        {filteredRoutes.map((route) => (
          <NavItem
            key={route.path}
            active={currentPath === route.path}
            path={route.path}
            navSize={navSize}
            icon={route.icon}
            title={route.title}
          />
        ))}
      </Flex>
      <Flex p="5%" flexDir="column" w="100%" alignItems={navSize === 'small' ? 'center' : 'flex-start'}>
        <Divider display={navSize === 'small' ? 'none' : 'flex'} />
        <Flex mb={4} mt={4} align="center">
          <Avatar size="sm" src="/2years.jpeg" />
          <Flex transition="all .2s ease" flexDir="column" ml={4} display={navSize === 'small' ? 'none' : 'flex'}>
            <Heading as="h3" size="sm">
              {firstName} {lastName}
            </Heading>
            <Text color="gray">{roles.map(role => role.slug).join(', ')}</Text>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
};

export default SideBar;
