import { getItem } from '../MainMenu/helpers';
import { logout } from 'services/logoutApi';
import { openNotificationWithIcon } from 'components/Notification';
import { NavLink } from 'react-router-dom';
import { Menu } from 'antd';
import { MenuProps } from 'antd/es/menu';
import { TypeSecondaryMenu } from './types';

type MenuItem = Required<MenuProps>['items'][number];

const SecondaryMenu = ({ t }: TypeSecondaryMenu): JSX.Element => {
  const secondaryMenuItems: MenuItem[] = [
    getItem(
      <NavLink to="/accounts/profile">
        {t('header:app.header.profile')}
      </NavLink>,
      'profile',
      false,
    ),
    getItem(
      <NavLink to="/accounts/list">
        {t('header:app.header.users_list')}
      </NavLink>,
      'accountsList',
      false,
    ),
    getItem(
      <NavLink
        to="/accounts/list"
        onClick={() =>
          logout()
            .then(() => {
              window.location.href = '/';
            })
            .catch(() =>
              openNotificationWithIcon('error', {
                message: 'Ошибка',
                description: 'Запрос выхода из сессии завершился неудачей',
              }),
            )
        }
      >
        {t('header:app.header.logout')}
      </NavLink>,
      'logout',
      false,
    ),
  ];
  return <Menu items={secondaryMenuItems} />;
};

export default SecondaryMenu;
