import React, { useContext } from 'react';
import { NavbarProps } from 'common/types';
import { useStyles } from './styles/styles';
import { NavbarItem } from './navbar-item';
import { AppContext } from 'context/app-context';
import { NavbarUser } from './user';

export const Navbar: React.FC<NavbarProps> = ({ navbarItems }) => {
  const classes = useStyles();
  const { state, dispatch } = useContext(AppContext);

  return (
    <div className={classes.navbarWrapper}>
      <ul className={classes.navbarMenu}>
        {navbarItems.map(({ label, key }, i) => {
          return (
            <NavbarItem
              key={`navbar_item_${key}`}
              label={label}
              onClick={() => {
                dispatch({ type: 'content/set', payload: key });
              }}
              active={key === state.content.component}
            />
          );
        })}
      </ul>
      <NavbarUser />
    </div>
  );
};
