/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';
/* ----------------------------------- mui ---------------------------------- */
import { Container, Grid } 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-report/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';

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

  const [listClaimStatusItems, setListClaimStatusItems] = useState([]);
  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 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,
  };
  /* -------------------------------------------------------------------------- */

  /* ---------------------------- 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: '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 parameters =
        Object.keys(appliedParams).length !== 0
          ? appliedParams
          : Object.fromEntries([
              ...searchParams.entries(),
              ['order', orders.order],
              ['orderBy', orders.orderBy],
            ]);

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

      setSearchParams(parameters);

      setListClaimStatusItems(claim.data.data.allClaimStatus);
      setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
      setPaginationTable(claim.data.data.allMembersByClaimStatus);

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

  return (
    <Page title="Claim Reports">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Grid container spacing={2}>
          <Grid item xs={12} lg={12} md={12}>
            <CardClaimStatus data={listClaimStatusItems} />
          </Grid>
          <Grid item xs={12} lg={12} md={12}>
            {/* <TableList
              headCells={headCells}
              rows={listAllMemberByClaimStatus}
              orders={orders}
              paginations={paginations}
              loadings={loadings}
              params={params}
            /> */}
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}
