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 View from './View';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import axios from '../../../utils/axios';
import { Appointment } from '../../../@types/doctor';

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

  const isEdit = id ? true : false;

  const [currentAppointment, setCurrentAppointment] = useState<Appointment>();

  useEffect(() => {
    if (isEdit) {
      axios.get('/live-chat/' + id).then((res) => {
        setCurrentAppointment(res.data);
      });
    }
  }, [id]);

  return (
    <Page title="Live Chat">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center">
          <HeaderBreadcrumbs
            heading={!isEdit ? 'Live Chat' : 'Live Chat'}
            links={[
              { name: 'Report', href: '/report' },
              {
                name: 'Live Chat',
                href: '/report/live-chat',
              },
            ]}
          />
        </Stack>

        <View
          // isSubmitting={isSubmitting}
          isEdit={isEdit}
          currentAppointment={currentAppointment}
        />
      </Container>
    </Page>
  );
}
