import Layout, { LeftSidebar } from 'components/Layout';
import { FileOutlined, SettingOutlined } from '@ant-design/icons';
import { useLocation } from 'react-router-dom';
import { Authentication } from './Authentication';
import { useSettingsMessages } from './i18n';
import { TlsCertificate } from './TlsSertificate';

export const SettingsDashboard = (): JSX.Element => {
  const { pathname } = useLocation();
  const translations = useSettingsMessages();
  const leftSideBarContent = [
    {
      title: translations.title.title,
      key: 0,
    },
    {
      title: translations.menu.tls.tls,
      path: '/settings/tsl_certificate',
      key: 1,
      icon: <FileOutlined />,
    },
    {
      title: translations.menu.authentication.authentication,
      path: '/settings/authentication',
      key: 2,
      icon: <SettingOutlined />,
    },
  ];

  return (
    <Layout>
      <div style={{ height: '100%', display: 'flex' }}>
        <LeftSidebar leftSideBarContent={leftSideBarContent} />
        <div style={{ width: '100%' }}>
          {pathname === '/settings/tsl_certificate' ? (
            <TlsCertificate />
          ) : (
            <Authentication />
          )}
        </div>
      </div>
    </Layout>
  );
};
