// material-ui
import {
    Grid,
    // Typography,
    Tab,
    Box,
    // Button
} from '@mui/material';

import { TabPanel, TabContext, TabList } from '@mui/lab';
import * as React from "react";


import Loadable from 'components/Loadable';
import { lazy } from 'react';
const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
const ProofTab = Loadable(lazy(() => import('./ProofTab')));
const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
    const [_proofList, setProofList] = React.useState([]);
    const [_paymentList, setPaymentList] = React.useState([]);
    const [onReady, setOnReady] = React.useState(false);
    const [selectedTab, setSelectedTab] = React.useState("1");
    // const navigate = useNavigate();
    const [statusHistoryList, setStatusHistoryList] = React.useState([]);

    const reloadPage = () => {
        window.location.reload(false);
    }

    React.useEffect(() => {
        if (Object.keys(applicationDetailData).length > 0) {
            setStatusHistoryList(applicationDetailData.statusHistoryList);
        }
    }, [applicationDetailData]);

    React.useEffect(() => {
        setProofList(proofList);
    }, [proofList]);

    React.useEffect(() => {
        setPaymentList(paymentList);
    }, [paymentList]);

    React.useEffect(() => {
        //if state data are ready and assign to different field
        if (statusHistoryList.length > 0) {
            setOnReady(true);
        }
    }, [statusHistoryList]);

    // useEffect(() => {
    //     setLoding(false);
    // }, [submittedList]);

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    }

    // const onBtnClick = () => {
    //     navigate('/publicNotice/apply')
    // }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container sx={{ minHeight: '40vh'}}>
                {/*col 2*/}
                <Grid item xs={12}>
                    <TabContext value={selectedTab}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto'  }}>
                            <TabList onChange={handleChange} aria-label="lab API tabs example">
                                <Tab label={"Proof(" + _proofList?.length + ") "} value="1" />
                                <Tab label={"Payment(" + _paymentList.length + ") "} value="2" />
                                <Tab label={"Status History(" + statusHistoryList.length + ") "} value="3" />
                            </TabList>
                        </Box>
                        <TabPanel value="1" sx={{p:0}}>
                            <ProofTab
                                rows={_proofList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="2" sx={{p:0}}>
                            <PaymentTab
                                rows={_paymentList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="3" sx={{p:0}}>
                            <StatusHistoryTab
                                rows={statusHistoryList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;
