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

import { TabPanel, TabContext, TabList } from '@mui/lab';
import {useState, useEffect, lazy} from "react";
import { useIntl } from 'react-intl';

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


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

const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, setProofCount, setPaymentCount, setStatusHistoryCount }) => {
    const intl = useIntl();
    const [onReady, setOnReady] = useState(false);
    const [selectedTab, setSelectedTab] = useState("1");

    useEffect(() => {
        setOnReady(true);
    }, [appId]);

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

    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={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                <Tab label={"Proof (" + proofCount + ") "} value="1" />
                                <Tab label={"Online Payment (" + paymentCount + ") "} value="2" />
                                <Tab label={"Status History (" + statusHistoryCount + ") "} value="3" />
                            </TabList>
                        </Box>
                        <TabPanel value="1" sx={{ p: 0 }}>
                            <ProofTab
                                setCount={setProofCount}
                                appId={appId}
                            />
                        </TabPanel>
                        <TabPanel value="2" sx={{ p: 0 }}>
                            <PaymentTab
                                setCount={setPaymentCount}
                                appId={appId}
                            />
                        </TabPanel>
                        <TabPanel value="3" sx={{ p: 0 }}>
                            <StatusHistoryTab
                                setCount={setStatusHistoryCount}
                                appId={appId}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;
