import * as React from 'react';
import type { NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';

import Layout from 'src/components/Layout';
import { Pages } from 'src/constants';
import NewRequestMainSction from 'src/components/NewRequestSection/Main';
import Form from 'src/components/NewRequestSection/Form';

const NewRequestPage: NextPage = () => {
  const [requestType, setRequestType] = React.useState<null | 'tidb' | 'cloud'>(
    null
  );

  const { t } = useTranslation();
  const router = useRouter();

  const { type } = router.query;

  React.useEffect(() => {
    if (router && requestType) {
      router.push(
        Pages.NewRequest + `?type=${requestType}`,
        Pages.NewRequest + `?type=${requestType}`,
        { shallow: true }
      );
    }
  }, [requestType]);

  return (
    <Layout
      title="New Request"
      description="Create a new request."
      breadcrumbs={[
        { id: 'home', path: Pages.Home, label: t('pages.home') },
        { id: 'requests', path: Pages.Requests, label: t('pages.requests') },
        { id: 'new-request', label: t('pages.new_request') },
      ]}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2.5rem',
          pt: { xs: 0, md: '1.5rem' },
          pb: { xs: 0, md: '1.5rem' },
          maxWidth: '900px',
        }}
      >
        {!type && <NewRequestMainSction handleRequestType={setRequestType} />}
        {type === 'tidb' && <Form type="TiDB" />}
        {type === 'cloud' && <Form type="TiDB Cloud" />}
      </Box>
    </Layout>
  );
};

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
      // Will be passed to the page component as props
    },
  };
}

export default NewRequestPage;