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 { Practitioner } from '../../../@types/doctor';
import ButtonBack from '../../../components/ButtonBack';

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

  const isEdit = id ? true : false;

  const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();

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

  return (
    <Page title="Membership: Create a new Dokter">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center">
          {/* <ButtonBack /> */}
          <HeaderBreadcrumbs
            heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
            links={[
              { name: 'Master', href: '/master' },
              {
                name: 'Doctors',
                href: '/master/doctors',
              },
              { name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
            ]}
          />
        </Stack>

        <Form
          // isSubmitting={isSubmitting}
          isEdit={isEdit}
          currentPractitioner={currentPractitioner}
        />
      </Container>
    </Page>
  );
}
// const pageTitle = 'Create Data Dokter';
// return (
//   <Page title={pageTitle}>
//     <Container maxWidth={themeStretch ? false : 'xl'}>
//       <HeaderBreadcrumbs
//         heading={pageTitle}
//         links={[
//           {
//             name: 'Master',
//             href: '/master',
//           },
//           {
//             name: 'Dokter',
//             href: '/master/organizations/',
//           },
//           {
//             name: 'Create',
//             href: '/master/organizations/create/',
//           },
//         ]}
//       />

//       <Grid container spacing={2}>
//         <Grid item xs={12}>
//           <Card sx={{ p: 2 }}>
//             <Form
//               isSubmitting={isSubmitting}
//               isEdit={isEdit}
//               currentOrganizations={currentOrganizations}
//             />
//           </Card>
//         </Grid>
//       </Grid>
//     </Container>
//   </Page>
// );
// }