import React, { ReactNode } from 'react';
import { NavItem } from 'app/modules/navigation/components/nav/navItem';
import {
  accountSettingsRoute,
  calendarRoute,
  contactRoute,
  mapRoute,
  openVpnRoute,
  ROUTER,
  technicalManagementRoute,
} from 'app/common/routes';
import { ExternalNavItem } from 'app/modules/navigation/components/nav/externalNavItem';
import { ActionNavItem } from 'app/modules/navigation/components/nav/actionNavItem';
import { AdminGuard, PermissionGuard } from 'app/common/containers/auth/guard.container';
import { AUTH } from 'app/common/store/auth/auth.constants';
import { UPDATE_NOTIFICATION_CATEGORY } from 'app/modules/notifications/store/updateNotification/updateNotifications.constants';
import { some } from 'lodash';
import { getAdminPanelUrl } from 'app/common/services/config/config.service';
import { useSelector } from 'react-redux';
import { selectUpdateNotifications } from 'app/modules/notifications/store/updateNotification/updateNotifications.selectors';

interface Props {
  onClickItemOut: () => void,
  children: ReactNode,
}
const SideNav = ({ children, onClickItemOut }: Props) => {
  const updateNotifications = useSelector(selectUpdateNotifications);

  const getUpdateNotification = (category) => {
    return some(updateNotifications, { category });
  };

  return (
    <nav className={'c-side-nav'}>
      {children}
      <ul className={'ul--no-decoration'}>
        <PermissionGuard permission={AUTH.PERMISSION.TECHNICAL.SHOW}>
          <li>
            <NavItem
              icon={'icon-system-alternate'}
              title={'technical'}
              url={ROUTER.generate(technicalManagementRoute)}
            /></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.DASHBOARD.SHOW}>
          <li><NavItem icon={'icon-compass'} onClick={onClickItemOut} title={'dashboard'} url={ROUTER.generate('dashboardRoute')}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.EARNINGS.SHOW}>
          <li><NavItem icon={'icon-dollar-circle'} onClick={onClickItemOut} title={'earnings'} url={ROUTER.generate('earningsRoute')}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.FORECAST.SHOW}>
          <li><NavItem icon={'icon-chart-line-up'} onClick={onClickItemOut} title={'forecast'} url={ROUTER.generate('forecastRoute')}
            hasUpdateNotification={getUpdateNotification(UPDATE_NOTIFICATION_CATEGORY.FORECAST)}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.EMISSION_UNIVERSE.SHOW}>
          <li><NavItem icon={'icon-mi-footprint'} onClick={onClickItemOut} title={'emissions'} url={ROUTER.generate('emissionUniverseRoute')}
            hasUpdateNotification={getUpdateNotification(UPDATE_NOTIFICATION_CATEGORY.EMISSION_UNIVERSE)}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.REPORTS.SHOW}>
          <li><NavItem icon={'icon-clipboard-check'} onClick={onClickItemOut} title={'reports'} url={ROUTER.generate('reportsRoute')} /></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.DOCUMENTS.SHOW}>
          <li><NavItem icon={'icon-file'} onClick={onClickItemOut} title={'documents'} url={ROUTER.generate('documentsRoute')}
            hasUpdateNotification={getUpdateNotification(UPDATE_NOTIFICATION_CATEGORY.DOCUMENTS)}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.CALENDAR.SHOW}>
          <li><NavItem icon={'icon-calendar2'} onClick={onClickItemOut} title={'calendar'} url={ROUTER.generate(calendarRoute)}
            hasUpdateNotification={getUpdateNotification(UPDATE_NOTIFICATION_CATEGORY.CALENDAR)}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.MAP.SHOW}>
          <li><NavItem icon={'icon-globe'} onClick={onClickItemOut} title={'map'} url={ROUTER.generate(mapRoute)}/></li>
        </PermissionGuard>
      </ul>
      <hr className={'hr c-side-nav__divider'}/>
      <ul className={'ul--no-decoration'}>
        <PermissionGuard permission={AUTH.PERMISSION.NEWS.SHOW}>
          <li><NavItem icon={'icon-news2'} onClick={onClickItemOut} title={'news'} url={ROUTER.generate('newsRoute')}
            hasUpdateNotification={getUpdateNotification(UPDATE_NOTIFICATION_CATEGORY.NEWS)}/></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.FAQ.SHOW}>
          <li><NavItem icon={'icon-question-circle'} onClick={onClickItemOut} title={'faq'} url={ROUTER.generate('faqRoute')} /></li>
        </PermissionGuard>
        <PermissionGuard permission={AUTH.PERMISSION.CONTACT.SHOW}>
          <li><NavItem icon={'icon-phone'} onClick={onClickItemOut} title={'contact'} url={ROUTER.generate(contactRoute)}/></li>
        </PermissionGuard>
      </ul>
      <hr className={'hr c-side-nav__divider'}/>
      <ul className={'ul--no-decoration'}>
        <AdminGuard>
          <li>
            <ExternalNavItem icon={'icon-cog'} title={'admin'} url={getAdminPanelUrl()}/>
          </li>
        </AdminGuard>
        <PermissionGuard permission={AUTH.PERMISSION.VPS.SHOW}>
          <li>
            <ExternalNavItem iconFromImage icon={'icon-vps'} title={'open vps'} url={openVpnRoute}/>
          </li>
        </PermissionGuard>
      </ul>


      <div className={'u-display-md--none'}>
        <hr className={'hr c-side-nav__divider'}/>
        <ul className={'ul--no-decoration u-font-size--normal'}>
          <li><NavItem icon={'icon-user'} onClick={onClickItemOut} title={'Account'} url={ROUTER.generate(accountSettingsRoute)}/></li>
          <li><ActionNavItem title="log out" icon="icon-door-arrow-right"/></li>
        </ul>
      </div>
    </nav>);
};

export { SideNav };