/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {useLocation} from 'react-router-dom';
import {useSelector} from 'react-redux';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

import {RootState} from 'store';
import urlRoute from 'routers/url-routes';

import {MenuLayout, MenuItem} from './style';

interface IMenu {
  toggleShowMenu: () => void;
}

const menuTitles = Object.keys(urlRoute).filter((menuTitle: string) => menuTitle !== 'login');
const Menu = (props: IMenu) => {
  const {toggleShowMenu} = props;
  const applicationId = useSelector((state: RootState) => state.authentication.applicationId);
  const {pathname} = useLocation();
  const currentLocation = pathname.split('/')[2];

  return (
    <MenuLayout>
      {menuTitles.map((menuItem: string): JSX.Element | null => {
        const {path, icon, notSupported} = urlRoute[menuItem];

        if (notSupported) {
          return null;
        }

        const active = currentLocation === path;

        return (
          <MenuItem
            className={active ? 'active' : ''}
            onClick={toggleShowMenu}
            key={menuItem}
            to={`/${applicationId}/${path}`}
          >
            <span><FontAwesomeIcon icon={icon} /></span>
            <p>{menuItem}</p>
          </MenuItem>
        );
      })}
    </MenuLayout>
  );
};

export default Menu;