// @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 CardSearchMember from '@/sections/dashboard/CardSearchMember'
import { useContext, useEffect, useState } from 'react';
import axios from '@/utils/axios';
import { Stack } from '@mui/system';
import { Input } from '@mui/material';
//sections
import TableList from '@/sections/dashboard/TableList';
import { fDate } from '@/utils/formatTime';
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';

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

// const [notifications, setNotifications] = useState([])

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 [tableData, setTableData] = useState([]);
  const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);

  // TODO Remove This
  //const [itemList, setItemList] = useState([]);
  function handleDataLoaded(dataTable) {
    let dummyData = [];
    dataTable.map(function(data) {
      if (data.status == 'approved') {
        dummyData.push({
          info: `LOG Approved for member ${data.member.full_name}`,
          date: fDate(data.created_at, "dd MMMM"),
          time: fDate(data.created_at, "HH:mm")
        })
      }
    })

    //setItemList(dummyData);
  }

  return (
    <Page title="Dashboard">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Grid container spacing={2}>
          <Grid item xs={12} lg={6} md={6}>
            <CardSearchMember handleSubmitSuccess={() => {console.log('submit success')}}></CardSearchMember>
          </Grid>
          <Grid item xs={12} lg={6} md={6}>
            <CardNotification data={itemList} />
          </Grid>
          <Grid item xs={12} lg={12} md={12}>
            <TableList dataLoaded={handleDataLoaded}/>
          </Grid>
        </Grid>
      </Container>

    </Page>
  );
}