import { EditOutlined, HomeOutlined, LogoutOutlined, TranslationOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { FC } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { logoutAsync, selectApp } from '../../../redux';
import { appServices } from '../../../services';
import { PermissionToMenuItem } from '../../../utils/helpers/permission-to-menu-item';

const Sider: FC = () => {
  const dispatch = useDispatch();

  const { replace, asPath, pathname } = useRouter();

  const { user } = useSelector(selectApp);

  return (
    <Menu theme='dark' selectedKeys={[pathname]} mode='vertical'>
      <Menu.Item key='/dashboard' icon={<HomeOutlined />}>
        <Link href='/dashboard'>Home</Link>
      </Menu.Item>

      {/* {user?.permissions.findIndex(el => el.name.includes('users')) !== -1 && < Menu.Item key='/dashboard/manage/roles' icon={< UserOutlined />}>
        <Link href='/dashboard/manage/roles'>Roles</Link>
      </Menu.Item>} */}

      <Menu.SubMenu key='sub1' title='Manage' icon={<EditOutlined />}>
        {user?.permissions.map((el) => {
          const t = PermissionToMenuItem(el.name);
          if (t) {
            if (Array.isArray(t)) {
              return t.map((el) => (
                <Menu.Item key={el.path}>
                  <Link href={el.path}>{el.title}</Link>
                </Menu.Item>
              ));
            } else
              return (
                <Menu.Item key={t.path}>
                  <Link href={t.path}>{t.title}</Link>
                </Menu.Item>
              );
          }
        })}
      </Menu.SubMenu>
      <Menu.SubMenu title='Language' icon={<TranslationOutlined />}>
        <Menu.Item
          key='arabic'
          title='Arabic'
          onClick={async () => {
            await appServices.changeLang({ lang: 'ar' });
            replace(asPath, undefined, { locale: 'ar' });
          }}
        >
          Arabic
        </Menu.Item>
        <Menu.Item
          key='english'
          title='English'
          onClick={async () => {
            await appServices.changeLang({ lang: 'en' });
            replace(asPath, undefined, { locale: 'en' });
          }}
        >
          English
        </Menu.Item>
      </Menu.SubMenu>
      <Menu.Item
        icon={<LogoutOutlined />}
        key='LogOut'
        onClick={() => {
          dispatch(logoutAsync());
          replace('/login');
        }}
      >
        LogOut
      </Menu.Item>
    </Menu>
  );
};
export default Sider;