import { Card, Grid } from '@mui/material';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import CorporateTabNavigations from '../CorporateTabNavigations';
import DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
  const { themeStretch } = useSettings();

  const { corporate_id } = useParams();

  const [corporate, setCorporate] = useState<Corporate | null>();

  const configuredCorporateContext = useContext(ConfiguredCorporateContext);

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
  }, [configuredCorporateContext]);

  return (
    <Page title="Corporate Plan">
      <HeaderBreadcrumbs
        heading={'Corporate Plan'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: corporate?.name ?? '-',
            href: '/corporates/' + corporate_id,
          },
          {
            name: 'Corporate Plan',
            href: '/corporates/' + corporate_id + '/corporate-plans',
          },
        ]}
      />

      <Grid container spacing={2}>
        <Grid item xs={8}>
          <Card>
            <CorporateTabNavigations position={'corporate-plans'} />
            <DivisionsList />
          </Card>
        </Grid>
        <Grid item xs={4}>
          <Card sx={{ p: 2 }}>Corporate Detail Goes Here &nbsp;</Card>
        </Grid>
      </Grid>
    </Page>
  );
}
