/* ---------------------------------- @mui ---------------------------------- */
import { Stack, Button, MenuItem, SelectChangeEvent, Tab, Tabs, Card, Box } from '@mui/material';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
import { styled } from '@mui/material/styles';
/* ---------------------------------- react --------------------------------- */
import { useContext, useEffect, useState } from 'react';

/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import TableComponent from '../../components/Table';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
//import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { fDate, fDateSuffix } from '../../utils/formatTime';
import Typography from '@mui/material/Typography';
import { format } from 'date-fns';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import HistoryIcon from '@mui/icons-material/History';
import SearchIcon from '@mui/icons-material/Search';
import Label from '../../components/Label';
import { enqueueSnackbar } from 'notistack';
import { LoadingButton, TabPanel } from "@mui/lab";
import { LanguageContext } from '@/contexts/LanguageContext';
import MuiDialog from '@/components/MuiDialog';
import DialogMember from './DialogMember';
import DialogFinalLog from './DialogFinalLog';
import { fPostFormat } from '@/utils/formatTime';
import TableListFinalLog from './TableListFinalLog';
import TableListReqLog from './TableListReqLog';

export default function TableList() {
  const navigate = useNavigate();
  const { localeData }: any =  useContext(LanguageContext);
  const [currentTab, setCurrentTab] = useState<string>('request_log');

  useEffect(() => {
    setCurrentTab('request_log')
  }, [])

  function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
      setCurrentTab(newValue)
  }
  

  const RootNotificationStyle = styled(Card)(({ theme }) => ({
    boxShadow: 'none',
    padding: '1rem 0.5rem',
    color: 'black',
    borderRadius: 0,
    backgroundColor: theme.palette.grey[200],
    // maxHeight: '240px',
  }));

  function TabPanel(props:any) {
      const { children, value, index, ...other } = props;
      return (
        <div
          role="tabpanel"
          hidden={value !== index}
          id={`simple-tabpanel-${index}`}
          aria-labelledby={`simple-tab-${index}`}
          {...other}
        >
          {value === index && (
            <Box sx={{ p: 3 }}>
              <div>{children}</div>
            </Box>
          )}
        </div>
      );
  }

  return (
    <Card>
      <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
        <Tabs
            value={currentTab}
            onChange={handleChangeTab}
            aria-label="wrapped label tabs example"
        >
            <Tab value="request_log" label= "Request LOG" />
            <Tab value="final_log" label= "Final LOG" />
        </Tabs>
      </RootNotificationStyle>
      <TabPanel value={currentTab} index={'request_log'}>
        <TableListReqLog/>
      </TabPanel>
      <TabPanel value={currentTab} index={'final_log'}>
        <TableListFinalLog/>
      </TabPanel>
         
    </Card>
  );
}
