import { ThunderboltOutlined, LoginOutlined } from '@ant-design/icons';
import { useLocation } from 'react-router-dom';
import Layout, { LeftSidebar } from 'components/Layout';
import IncidentsRotationSettings from './IncidentsRotationSettings';
import EventsRotationType from './EventsRotationType';

const RotationDashboard = (): JSX.Element => {
  const { pathname } = useLocation();

  const leftSideBarContent = [
    {
      title: 'Настройки Ротации',
      key: 0,
    },
    {
      title: 'Инциденты',
      path: '/rotation/incidents',
      key: 1,
      icon: <ThunderboltOutlined />,
    },
    {
      title: 'События',
      path: '/rotation/events',
      key: 2,
      icon: <LoginOutlined />,
    },
  ];

  return (
    <Layout>
      <div style={{ height: '100%', display: 'flex' }}>
        <LeftSidebar leftSideBarContent={leftSideBarContent} />
        <div style={{ width: '100%' }}>
          {pathname === '/rotation/incidents' ? (
            <IncidentsRotationSettings />
          ) : (
            <EventsRotationType />
          )}
        </div>
      </div>
    </Layout>
  );
};

export default RotationDashboard;
