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 { useNavigate, 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 CorporateTabNavigations from "../CorporateTabNavigations";
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import DivisionsList from "./List";
import FormEdit from "./Form";
import { useEffect, useMemo, useState } from 'react';
import { Benefit } from '@/@types/corporates';
import axios from '@/utils/axios';



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

  const { corporate_id, benefit_id } = useParams();
  const [ currentCorporateBenefit, setCurrentCorporateBenefit ] = useState<Benefit>();
  const navigate = useNavigate();
  const isEdit = !!benefit_id;
  useEffect(() => {
    console.log(benefit_id);
    if (isEdit) {
      axios.get('/corporates/'+corporate_id+'/corporate-benefits/'+benefit_id+'/edit')
        .then((res) => {
          setCurrentCorporateBenefit(res.data);
        })
        .catch((err) => {
          if (err.response.status === 404) {
            navigate('/404');
          }
        })
    }
  }, [corporate_id, benefit_id]);


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



  return (
    <Page title="Create Benefit">

      {/* <HeaderBreadcrumbs
        heading={'Create Benefit'}
        links={[
          { name: 'Dashboard', href: '/dashboard' },
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/'+id,
          },
          {
            name: 'Benefits',
            href: '/corporates/'+id+'/benefits',
          },
          {
            name: 'Create',
            href: '/corporates/'+id+'/benefits/create',
          },
        ]}
      /> */}
      
{/* 
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Card sx={{ p: 2 }}>
            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
              <Stack spacing={3}>

                <Typography variant="h6">Benefit Detail</Typography>

                <RHFTextField name="name" label="Benefit Name" />

                <RHFTextField name="code" label="Benefit Code" />

                <Typography variant="h6">Benefit Configuration</Typography>
                
                <Divider orientation="horizontal" flexItem />
                <Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
                  <Stack spacing={2}>
                    <RHFCheckbox name="a" label='Outpatient'/>
                    {benefits.map(row => (
                      <Collapse in={true} timeout="auto" unmountOnExit >
                        <Typography>{row.category}</Typography>
                        <Grid container>
                        {row.childs.map(benefit => (
                          <Grid item xs={6}>
                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
                            </Grid>
                        ))}
                        </Grid>
                      </Collapse>
                    ))}
                    <Typography>Admin Fee</Typography>
                    <Grid container>
                    {benefits.map(row => (
                      <Grid item xs={4}>
                        <RHFCheckbox name="cat" label={row.category}/>
                      </Grid>
                    ))}
                    </Grid>
                  </Stack>


                  <Stack spacing={2}>
                    <RHFCheckbox name="a" label='Inpatient'/>
                    {benefits.map(row => (
                      <Collapse in={true} timeout="auto" unmountOnExit >
                        <Typography>{row.category}</Typography>
                        <Grid container>
                        {row.childs.map(benefit => (
                          <Grid item xs={6}>
                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
                            </Grid>
                        ))}
                        </Grid>
                      </Collapse>
                    ))}
                    <Typography>Admin Fee</Typography>
                    <Grid container>
                    {benefits.map(row => (
                      <Grid item xs={4}>
                        <RHFCheckbox name="cat" label={row.category}/>
                      </Grid>
                    ))}
                    </Grid>
                  </Stack>
                </Stack>

              </Stack>
            </FormProvider>
          </Card>
        </Grid>
      </Grid> */}
      <Stack direction="row" alignItems="center">
        <ArrowBackIosIcon
          onClick={() => navigate(`/corporates/${corporate_id}/benefit`)}
          sx={{ cursor: 'pointer' }}
        />
        <Typography variant="h5" sx={{ marginRight:2, flexGrow: 1 }}>
          Edit Plan 
        </Typography>
      </Stack>
      <FormEdit isEdit={true} currentCorporateBenefit={currentCorporateBenefit}/>
    </Page>
  );
}
