import { Divider, Menu, Tooltip } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';

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

export default function SiderMenu({
  collapsed,
  selectedKey,
  hangleMenuClick,
}: SiderMenuProps) {
  const { t } = useTranslation();
  const collapseStyle = collapsed
    ? { fontSize: '12px' }
    : { fontSize: '12px', paddingLeft: '52px' };

  const menuItems = [
    {
      key: 'toggle',
      icon: (
        <img
          src={
            !collapsed
              ? './icons/sider/menu_open.svg'
              : './icons/sider/menu.svg'
          }
          alt="toggle"
        />
      ),
      label: 'VORKOUT',
      style: { fontSize: '20px' },
    },
    {
      key: '/process-diagram',
      icon: (
        <img src="./icons/sider/process-diagram.svg" alt="process diagram" />
      ),
      label: (
        <Tooltip title={t('processDiagrams')}>{t('processDiagrams')}</Tooltip>
      ),
    },
    {
      key: '/running-processes',
      icon: (
        <img
          src="./icons/sider/running-processes.svg"
          alt="running processes"
        />
      ),
      label: (
        <Tooltip title={t('runningProcesses')}>{t('runningProcesses')}</Tooltip>
      ),
    },
    !collapsed
      ? {
          key: 'divider',
          label: <Divider />,
          style: {
            marginBottom: '-16px',
            marginTop: '-4px',
            cursor: 'default',
            width: '100%',
          },
          disabled: true,
        }
      : null,
    {
      key: 'sub1',
      icon: <img src="./icons/sider/settings.svg" alt="settings" />,
      label: t('settings'),
      className: 'no-expand-icon',
      children: [
        {
          key: '/accounts',
          label: !collapsed ? (
            <Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
          ) : (
            t('accounts')
          ),
          style: collapseStyle,
        },
        {
          key: '/events-list',
          label: !collapsed ? (
            <Tooltip title={t('eventsList')}>{t('eventsList')}</Tooltip>
          ) : (
            t('eventsList')
          ),
          style: collapseStyle,
        },
        {
          key: '/configuration',
          label: !collapsed ? (
            <Tooltip title={t('configuration')}>{t('configuration')}</Tooltip>
          ) : (
            t('configuration')
          ),
          style: collapseStyle,
        },
      ],
    },
  ];

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