import { Divider, Menu } from 'antd';
import React from 'react';

interface SiderMenuProps {
  collapsed: boolean;
  selectedKey: string;
  hangleMenuClick: (e: any) => void;
}

export default function SiderMenu({
  collapsed,
  selectedKey,
  hangleMenuClick,
}: SiderMenuProps) {
  const menuItems = (
    <React.Fragment>
      <Menu.Item
        key="0"
        icon={
          <img
            src={
              !collapsed
                ? './icons/sider/menu_open.svg'
                : './icons/sider/menu.svg'
            }
            alt="toggle"
          />
        }
        style={{ fontSize: '20px' }}
      >
        VORKOUT
      </Menu.Item>

      <Menu.Item
        key="/process-diagram"
        icon={
          <img src="./icons/sider/process-diagram.svg" alt="process diagram" />
        }
      >
        Схемы процессов
      </Menu.Item>

      <Menu.Item
        key="/running-processes"
        icon={
          <img
            src="./icons/sider/running-processes.svg"
            alt="running processes"
          />
        }
      >
        Запущенные процессы
      </Menu.Item>

      {!collapsed && <Divider style={{ marginBottom: 0 }} />}

      <Menu.SubMenu
        key="sub1"
        icon={<img src="./icons/sider/settings.svg" alt="settings" />}
        title="Настройки"
        expandIcon={false}
      >
        <Menu.Item
          key="/accounts"
          style={{ fontSize: '12px', paddingLeft: '52px' }}
        >
          Учетные записи
        </Menu.Item>
        <Menu.Item
          key="/events-list"
          style={{ fontSize: '12px', paddingLeft: '52px' }}
        >
          Справочник событий
        </Menu.Item>
        <Menu.Item
          key="/configuration"
          style={{ fontSize: '12px', paddingLeft: '52px' }}
        >
          Конфигурация
        </Menu.Item>
      </Menu.SubMenu>
    </React.Fragment>
  );

  return (
    <Menu
      theme="light"
      selectedKeys={[selectedKey]}
      mode="inline"
      onClick={hangleMenuClick}
      defaultOpenKeys={['sub1']}
    >
      {menuItems}
    </Menu>
  );
}
