/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
/* ----------------------------------- mui ---------------------------------- */
import { Container, Grid } from '@mui/material';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
/* ---------------------------------- hooks --------------------------------- */
import useSettings from '../../hooks/useSettings';
/* -------------------------------- sections -------------------------------- */
import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
/* ---------------------------------- utils --------------------------------- */
import axios from '../../utils/axios';
/* --------------------------------- context -------------------------------- */
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import List from './List';
// theme
import palette from '../../theme/palette';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';

interface ClaimStatusType {
  name: string;
  value: number;
  color: string;
}

export default function Drugs() {
  const { themeStretch } = useSettings();
  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const [listClaimStatusItems, setListClaimStatusItems] = useState<ClaimStatusType[]>([]);

  useEffect(() => {
    (async () => {
      const claimStatus = await axios.get(`${corporateValue}/claim-report/claim-status`);

      setListClaimStatusItems([
        {
          name: 'Requested',
          value: claimStatus.data.data.requesteds,
          color: '#159C9C',
        },
        {
          name: 'Approval',
          value: claimStatus.data.data.approveds,
          color: '#229A16',
        },
        // {
        //   name: 'Disbrusment',
        //   value: claimStatus.data.data.disbrusments,
        //   color: '#BF6919',
        // },
        {
          name: 'Decline',
          value: claimStatus.data.data.rejecteds,
          color: '#B72136',
        },
      ]);
    })();
  }, [corporateValue]);

  return (
    <Page title="Claim Reports">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <HeaderBreadcrumbs
              heading={'Claim Report'}
              links={[
                { name: 'Case Management', href: '/claim-report' },
                { name: 'Claim Report', href: '/claim-report'}
              ]}
        />
        <Grid container spacing={2}>
          <Grid item xs={12} lg={12} md={12}>
            <CardClaimStatus data={listClaimStatusItems} />
          </Grid>
          <Grid item xs={12} lg={12} md={12}>
            <List />
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}