import React from 'react';
import { useStyles } from './styles/styles';
import { SidebarItem } from './sidebar-item';
import { navigate, useLocation } from '@reach/router';
import { adminSidebarItems, userSidebarItems } from './sidebar-items';

export const Sidebar: React.FC = () => {
  const location = useLocation();
  const classes = useStyles();

  const isAdminLoggedIn =
    JSON.parse(localStorage.getItem('user') || '{}').role === 'Admin';

  const sidebarItems = isAdminLoggedIn ? adminSidebarItems : userSidebarItems;

  return (
    <div className={classes.sidebarWrapper}>
      <div className={classes.logoContainer}>ICS</div>
      <ul>
        {sidebarItems.map(({ label, icon, url }) => (
          <SidebarItem
            label={label}
            icon={icon}
            key={label}
            onClick={() => {
              navigate(url);
            }}
            active={location.pathname === url}
          />
        ))}
      </ul>
    </div>
  );
};
