import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { Autocomplete, Button, Card, Collapse, Container, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { useParams, useNavigate } from 'react-router-dom';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
import Page from '../../components/Page';
import useSettings from '../../hooks/useSettings';
import { useEffect, useMemo, useRef, useState } from 'react';
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
import { styled } from '@mui/system';
import axios from '../../utils/axios';
import { enqueueSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import Iconify from '../../components/Iconify';
import Form from './Form';

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

  const isEdit = id ? true : false;

  const [currentClaim, setCurrentClaim] = useState();

  useEffect(() => {
    if (isEdit) {
      axios.get('/claims/' + id).then((res) => {
        // console.log('Yeet', res.data);
        setCurrentClaim(res.data);
      });
    }
  }, [id]);

  
  return (
    <Page title={isEdit ? `Edit Claim : ${currentClaim?.id}` : "Create New Claim"}>
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center">
          <HeaderBreadcrumbs
            heading={
              !isEdit
                ? 'Create New Claim'
                : `Edit Claim : ${currentClaim?.code}`
            }
            links={[
              { name: 'Dashboard', href: '/dashboard' },
              {
                name: 'Claim',
                href: '/claims',
              },
              { name: !isEdit ? 'Create' : currentClaim?.id ?? '' },
            ]}
          />
        </Stack>

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