import { useEffect, useState } from 'react';
import { paramCase } from 'change-case';
import { useParams, useLocation } from 'react-router-dom';
// @mui
import { Container, Stack } 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 { Organizations } from '../../../@types/organization';

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

  const isEdit = id ? true : false;

  const [currentOrganizations, setCurrentOrganizations] = useState<Organizations>();

  useEffect(() => {
    if (isEdit) {
      axios.get('/organizations/' + id + '/edit').then((res) => {
        setCurrentOrganizations(res.data);
      });
    }
  }, [id]);

  return (
    <Page title="Membership: Create a new Rumah Sakit">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center">
          <HeaderBreadcrumbs
            heading={!isEdit ? 'Create a new Rumah Sakit' : 'Edit Rumah Sakit'}
            links={[
              { name: 'Master', href: '/master' },
              {
                name: 'Organizations',
                href: '/master/hospitals',
              },
              { name: !isEdit ? 'Create' : currentOrganizations?.name ?? '' },
            ]}
          />
        </Stack>

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