
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';
import { Stack } from "@mui/system";
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { Typography } from "@mui/material";



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

  const isEdit = !!id;

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


  return (
    <Page title="Create Corporate Plan">
      {/* <HeaderBreadcrumbs
        heading={ 'Edit Plan'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: 'Corporate Name',
            href: '/corporates/'+corporate_id,
          },
          {
            name: 'Corporate Plans',
            href: '/corporates/'+corporate_id+'/corporate-plans',
          },
          {
            name: !isEdit ? 'Create' : 'Edit',
            href: '/corporates/'+corporate_id+'/corporate-plans/'+id,
          },
        ]}
      /> */}
      <Stack direction="row" alignItems="center">
        <ArrowBackIosIcon
          onClick={() => navigate(`/corporates/${corporate_id}/plans`)}
          sx={{ cursor: 'pointer' }}
        />
        <Typography variant="h5" sx={{ marginRight:2, flexGrow: 1 }}>
          Edit Plan 
        </Typography>
      </Stack>

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