// @mui
import { Typography, Container, Grid } from '@mui/material';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
// theme
import CardNotification from '../../sections/dashboard/CardNotification';
import CardBalance from '../../sections/dashboard/CardBalance';
import TableList from '../../sections/dashboard/TableList';
import { useContext, useEffect, useState } from 'react';
import axios from '../../utils/axios';
import { Stack } from '@mui/system';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';

// ----------------------------------------------------------------------

const itemList = [
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
];

// ----------------------------------------------------------------------

/* ---------------------------------- types --------------------------------- */

type PolicyProps = {
  myLimit: {
    balance: number;
    total: number;
    percentage: number;
  };
  lockLimit: {
    balance: number;
    percentage: number;
  };
};

/* -------------------------------------------------------------------------- */

/* ------------------------------ default data ------------------------------ */
const defaultPolicyData = {
  myLimit: {
    balance: 0,
    total: 0,
    percentage: 0,
  },
  lockLimit: {
    balance: 0,
    percentage: 0,
  },
};
/* -------------------------------------------------------------------------- */

export default function Dashboard() {
  const { themeStretch } = useSettings();
  const { corporateValue } = useContext(UserCurrentCorporateContext);

  // const [tableData, setTableData] = useState([]);
  const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);

  useEffect(() => {
    (async () => {
      setPolicyData(defaultPolicyData);
      await new Promise((resolve) => setTimeout(resolve, 250));
      const dashboard = await axios.get(`${corporateValue}/policy`);
      setPolicyData(dashboard.data.policy);
    })();
  }, [corporateValue]);

  return (
    <Page title="Dashboard">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" justifyContent="space-between">
          <Typography variant="h3" component="h1" paragraph>
            Dashboard
          </Typography>
        </Stack>

        <Grid container spacing={2}>
          <Grid item xs={12} lg={6} md={12}>
            <CardNotification data={itemList} />
          </Grid>
          <Grid item xs={12} lg={6} md={12}>
            <CardBalance data={policyData} />
          </Grid>
          <Grid item xs={12} lg={12} md={12}>
            <TableList />
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}