import { Card, Grid } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
import Page from '../../../../components/Page';
import useSettings from '../../../../hooks/useSettings';
import CorporateTabNavigations from '../../CorporateTabNavigations';

import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
import CorporateFormulariumCreateForm from "./Form"


export default function CorporateFormulariumCreate() {
  const { themeStretch } = useSettings();

  const { corporate_id } = useParams();

  const [corporate, setCorporate] = useState<Corporate | null>();

  const configuredCorporateContext = useContext(ConfiguredCorporateContext);

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
  }, [configuredCorporateContext]);

  return(
    <Page title='Create Formularium'>
      <HeaderBreadcrumbs
         heading={'Create Formularium'}
         links={[
          {
            name: 'Corporates',
            href: '/corporates'
          },
          {
            name: corporate?.name ?? "-",
            href: '/corporates/' + corporate_id,
          },
          {
            name: 'Formularium',
            href: '/corporates/' + corporate_id + '/formulariums',
          },
          {
            name: 'Create Formularium',
            href: '/corporates/' + corporate_id + '/formulariums/create',
          },
         ]} 
        />
        
        <CorporateFormulariumCreateForm />
    </Page>
  )
}