// 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 Loadable from 'components/Loadable';
import { useIntl } from "react-intl";
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
const ProofTab = Loadable(lazy(() => import('./ProofTab')));
const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));


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

const PublicNotice = ({ appId, proofCount, paymentCount, setProofCount, setPaymentCount }) => {

    const [onReady, setOnReady] = useState(false);
    const [selectedTab, setSelectedTab] = useState("1");
    const intl = useIntl();

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

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

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container>
                {/*col 2*/}
                <Grid item xs={12}>
                    <TabContext value={selectedTab}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                            <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                <Tab
                                    aria-label={intl.formatMessage({ id: 'proofRecord' })}
                                    label={
                                        intl.formatMessage({ id: 'proofRecord' }) + " (" + proofCount + ") "} value="1"
                                />
                                <Tab
                                    aria-label={intl.formatMessage({ id: 'onlinePaymentHistory' })}
                                    label={intl.formatMessage({ id: 'onlinePaymentHistory' }) + " (" + paymentCount + ") "} value="2"
                                />
                            </TabList>
                        </Box>
                        <TabPanel value="1">
                            <ProofTab
                                setCount={setProofCount}
                                appId={appId}
                            />
                        </TabPanel>
                        <TabPanel value="2">
                            <PaymentTab
                                setCount={setPaymentCount}
                                appId={appId}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;
