
import { useNavigate, useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import { useEffect, useMemo, useState } from 'react';
import axios from '../../../utils/axios';
import { useSnackbar } from 'notistack';
import CorporatePlanForm from './Form';
import { CorporatePlan } from '../../../@types/corporates';



export default function PlanCreate() {
  const { themeStretch } = useSettings();
  const { corporate_id, id } = useParams();
  const [ currentCorporateBenefit, setCurrentCorporateBenefit ] = useState<CorporatePlan>();
  const navigate = useNavigate();

  const isEdit = !!id;

  useEffect(() => {
    if (isEdit) {
      axios.get('/corporates/'+corporate_id+'/corporate-benefits/'+id+'/edit')
        .then((res) => {
          setCurrentCorporateBenefit(res.data);
        })
        .catch((err) => {
          if (err.response.status === 404) {
            navigate('/404');
          }
        })
    }
  }, [corporate_id, id]);


  return (
    <Page title="Create Corporate Benefit">
      <HeaderBreadcrumbs
        heading={'Create Corporate Benefit'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/'+corporate_id,
          },
          {
            name: 'Corporate Benefits',
            href: '/corporates/'+corporate_id+'/corporate-benefits',
          },
          {
            name: !isEdit ? 'Create' : 'Edit',
            href: '/corporates/'+corporate_id+'/corporate-benefits/'+id,
          },
        ]}
      />

      <CorporatePlanForm isEdit={isEdit} currentCorporateBenefit={currentCorporateBenefit}/>
    </Page>
  );
}
