/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
/* ----------------------------------- mui ---------------------------------- */
import { Container, Grid, Typography } from '@mui/material';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
import TableList from '../../components/Table';
/* ---------------------------------- hooks --------------------------------- */
import useSettings from '../../hooks/useSettings';
/* -------------------------------- sections -------------------------------- */
import CardClaimStatus from '../../sections/claim-submit/CardClaimStatus';
/* ---------------------------------- utils --------------------------------- */
import axios from '../../utils/axios';
/* --------------------------------- context -------------------------------- */
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
/* --------------------------------- orders --------------------------------- */
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams } from 'react-router-dom';
import List from './List';
import ClaimItems from '../Claims/components/ClaimItems';
import DiagnosisHistory from '../Claims/components/DiagnosisHistory';
import Documents from '../Claims/components/Documents';
// theme
import palette from '../../theme/palette';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import { Stack } from '@mui/system';
import { fDateSuffix } from '../../utils/formatTime';
import DialogClaimSubmitMember from '../../sections/claim-submit/DialogClaimSubmitMember';

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

/* ------------------------------ default data ------------------------------ */
type DataMember = {
  id: number;
  fullName: string;
  memberId: string;
  limit: {
    current: number;
    total: number;
    percentage: number;
  };
  avatar?: {
    url?: string;
    title?: string;
  };
};

type CardPolicyProps = {
  limit: {
    myLimit: {
      balance: number;
      total: number;
      percentage: number;
    };
    lockLimit: {
      balance: number;
      percentage: number;
    };
  };
  topUpLimit: {
    companyName: string;
    policyNumber: number;
    totalMembers: number;
    totalCases: number;
    totalPersen: number;
    myLimit: {
      balance: number;
      total: number;
      percentage: number;
    };
    maxTopUp: number;
  };
  members?: DataMember[];
};

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

  const [listClaimStatusItems, setListClaimStatusItems] = useState<ClaimStatusType[]>([]);
  const [listAllMemberByClaimStatus, setListAllMemberByClaimStatus] = useState([]);

  /* -------------------------------------------------------------------------- */
  /*                                  setTable                                  */
  /* -------------------------------------------------------------------------- */

  const [isLoading, setIsLoading] = useState(true);

  const loadings = {
    isLoading: isLoading,
    setIsLoading: setIsLoading,
  };

  /* ------------------------------ handle params ----------------------------- */
  const [searchParams, setSearchParams] = useSearchParams();
  const [appliedParams, setAppliedParams] = useState({});
  const [policyData, setPolicyData] = useState<CardPolicyProps>();

  const params = {
    searchParams: searchParams,
    setSearchParams: setSearchParams,
    appliedParams: appliedParams,
    setAppliedParams: setAppliedParams,
  };
  /* -------------------------------------------------------------------------- */

  /* ------------------------------ handle order ------------------------------ */
  const [order, setOrder] = useState<Order>('asc');
  const [orderBy, setOrderBy] = useState('fullName');

  const orders = {
    order: order,
    setOrder: setOrder,
    orderBy: orderBy,
    setOrderBy: setOrderBy,
  };

  /* ---------------------------- Get Current Date ---------------------------- */
  const current = new Date();
  const date = fDateSuffix(current);
  /* -------------------------------------------------------------------------- */

  /* ---------------------------- handle pagination --------------------------- */
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
    current_page: 0,
    from: 0,
    last_page: 0,
    links: [],
    path: '',
    per_page: 0,
    to: 0,
    total: 0,
  });

  const paginations = {
    page: page,
    setPage: setPage,
    rowsPerPage: rowsPerPage,
    setRowsPerPage: setRowsPerPage,
    paginationTable: paginationTable,
    setPaginationTable: setPaginationTable,
  };
  /* -------------------------------------------------------------------------- */

  /* -------------------------------- headCell -------------------------------- */
  const headCells: HeadCell<never>[] = [
    {
      id: 'memberId',
      align: 'left',
      label: 'Member ID',
      isSort: true,
    },
    {
      id: 'codeRequest',
      align: 'left',
      label: 'Code Request',
      isSort: true,
    },
    {
      id: 'fullName',
      align: 'center',
      label: 'Name',
      isSort: true,
    },
    {
      id: 'division',
      align: 'center',
      label: 'Divisi',
      isSort: true,
    },
    {
      id: 'submissionDate',
      align: 'center',
      label: 'Submission Date',
      isSort: true,
    },
    {
      id: 'status',
      align: 'center',
      label: 'Status',
      isSort: true,
    },
  ];
  /* -------------------------------------------------------------------------- */

  useEffect(() => {
    (async () => {
      setIsLoading(true);

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

      setListClaimStatusItems([
        {
          name: 'Requested',
          value: claimStatus.data.data.requesteds,
          color: palette.dark.primary.dark,
        },
        {
          name: 'Approval',
          value: claimStatus.data.data.approveds,
          color: palette.dark.warning.dark,
        },
        {
          name: 'Rejected',
          value: claimStatus.data.data.rejecteds,
          color: palette.dark.error.dark,
        },
      ]);

      const parameters =
        Object.keys(appliedParams).length !== 0
          ? appliedParams
          : Object.fromEntries([...searchParams.entries()]);

      // const claim = await axios.get(`${corporateValue}/members`, {
      //   params: { ...parameters, type: 'claim-report' },
      // });

      setSearchParams(parameters);

      // setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
      // setPaginationTable(claim.data.data.allMembersByClaimStatus);

      setIsLoading(false);
    })();
  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);

  return (
    <Page title="Claim Reports">
      <HeaderBreadcrumbs
        heading={'Claim Submit'}
        links={[
          { name: 'Case Management', href: '/dashboard' },
          {
            name: 'Claim Submit',
            href: '/claim-submit',
          },
        ]}
      />
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Grid container spacing={2}>
          <Grid item xs={12} lg={6} md={6}>
            <Typography variant="h6" sx={{ marginLeft: '10px' }}>
              {' '}
              Select Employee
            </Typography>
          </Grid>
          <Grid item xs={12} lg={6} md={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Stack direction="row" alignItems="center">
              <Typography variant="inherit" align="right" sx={{ marginRight: '10px' }}>
                Submission Date
              </Typography>
              <Typography variant="subtitle1" align="right" sx={{ marginRight: '10px' }}>
                {date}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} lg={12} md={12}>
            <DialogClaimSubmitMember
              openDialog={true}
              setOpenDialog={false}
              title={{ name: 'te' }}
            />
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}
