import { FC } from 'react';
import { Link, useHistory, useLocation } from 'react-router-dom';

import { Button, Dropdown, Menu } from 'antd';
import {
  HistoryOutlined,
  LogoutOutlined,
  MenuOutlined,
  ReadOutlined,
  UserOutlined,
} from '@ant-design/icons';

import styles from './Nav.module.scss';

import { clearAuthToken } from '../../utils/tokenHelpers';
import NavButton, { INavButton } from './NavButton';
import classNames from "classnames";

interface NavProps {
  beforeButtons?: INavButton[];
  afterButtons?: INavButton[];
  className?: string
}

const Nav: FC<NavProps> = ({ beforeButtons, afterButtons, className }) => {
  const location = useLocation();
  const history = useHistory();

  const handleLogoutClick = () => {
    clearAuthToken();
    history.push('/login');
  };

  return (
    <div className={classNames(styles.nav, className)}>
      {beforeButtons?.map((button) => (
        <NavButton {...button} key={button.title} />
      ))}
      <div>
        <Dropdown
          trigger={['click']}
          overlay={
            <Menu selectedKeys={[location.pathname]}>
              <Menu.Item key="/" icon={<UserOutlined />}>
                <Link to={'/'}>Пацієнти</Link>
              </Menu.Item>
              <Menu.Item key="/schedule" icon={<ReadOutlined />}>
                <Link to={'/schedule'}>Журнал запису</Link>
              </Menu.Item>
              <Menu.Item key="/upload-history" icon={<HistoryOutlined />}>
                <Link to={'/upload-history'}>Історія завантажень</Link>
              </Menu.Item>
              <Menu.Item
                key="/logout"
                icon={<LogoutOutlined />}
                onClick={handleLogoutClick}
              >
                Вийти
              </Menu.Item>
            </Menu>
          }
        >
          <Button size="middle" type="primary">
            <MenuOutlined /> Меню
          </Button>
        </Dropdown>
      </div>
      {afterButtons?.map((button, i) => (
        <NavButton {...button}  key={button.title} />
      ))}
    </div>
  );
};

export default Nav;