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>
  );
}
