import { useEffect, useState } from 'react';
import { paramCase } from 'change-case';
import { useParams, useLocation } from 'react-router-dom';
// @mui
import { Container } from '@mui/material';
import useSettings from '../../hooks/useSettings';
import Page from '../../components/Page';
import Form from './Form';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import axios from '../../utils/axios';
import { Corporate } from '../../@types/corporates';

// ----------------------------------------------------------------------

export default function Create() {
  const { themeStretch } = useSettings();
  const { corporate_id } = useParams();

  const isEdit = corporate_id ? true : false;

  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();

  useEffect(() => {
    if (isEdit) {
      axios.get('/corporates/'+corporate_id+'/edit')
        .then((res) => {
          setCurrentCorporate(res.data);
        })
    }
  }, [corporate_id]);

  return (
    <Page title="Membership: Create a new corporate">
      <Container maxWidth={themeStretch ? false : 'lg'}>
        <HeaderBreadcrumbs
          heading={!isEdit ? 'Create a new corporate' : 'Edit corporate'}
          links={[
            { name: 'Dashboard', href: '/dashboard' },
            {
              name: 'Corporates',
              href: '/corporates',
            },
            { name: !isEdit ? 'Create' : currentCorporate?.name ?? '' },
          ]}
        />

        <Form isEdit={isEdit} currentCorporate={currentCorporate} />
      </Container>
    </Page>
  );
}
