import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { Card, Collapse, Divider, Grid, Stack, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { useParams } 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 { useMemo, useState } from 'react';
import Form from './Form';

export default function Divisions() {
  const { themeStretch } = useSettings();

  const [isEdit, setIsEdit] = useState(false);

  const [currentFormularium, setCurrentFormularium] = useState({});

  const NewDivisionSchema = Yup.object().shape({
    name: Yup.string().required('Name is required'),
    code: Yup.string().required('Corporate Code is required'),
    active: Yup.boolean().required('Corporate Status is required'),
  });

  const defaultValues = useMemo(
    () => ({
      code: '',
    }),
    []
  );

  const methods = useForm({
    resolver: yupResolver(NewDivisionSchema),
    defaultValues,
  });

  const {
    reset,
    watch,
    control,
    setValue,
    getValues,
    setError,
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  const onSubmit = async (data: any) => {
    console.log(data);
  };

  const pageTitle = 'Create Formularium';
  return (
    <Page title={pageTitle}>
      <HeaderBreadcrumbs
        heading={pageTitle}
        links={[
          {
            name: 'Master',
            href: '/master',
          },
          {
            name: 'Formularium',
            href: '/master/formularium/',
          },
          {
            name: 'Create',
            href: '/master/formularium/create/',
          },
        ]}
      />

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