import {useEffect, useState} from "react";
import CenterLayout from "@/layouts/CenterLayout";
import {useTranslations} from "next-intl";
import {Stack, Typography} from "@mui/material";
import Content from "@/components/dashboard/machinary-office/Prints/report/Content";

const ReportComponent = () => {
    const t = useTranslations()
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(true)
    const [isNotData, setIsNotData] = useState(true)

    useEffect(() => {
        if (sessionStorage.getItem('report-print') === null) {
            setLoading(false)
            setIsNotData(true)
            sessionStorage.setItem('report-print', 'seen')
        } else if (sessionStorage.getItem('report-print') === 'seen') {
            setLoading(false)
            setData(null)
            setIsNotData(true)
        } else if (data) {
            setLoading(false)
            sessionStorage.setItem('report-print', 'seen')
            setIsNotData(false)
        } else {
            setLoading(true)
            setData(JSON.parse(sessionStorage.getItem('report-print')))
            setIsNotData(true)
        }
    }, [data]);

    return (
        <Stack sx={{bgcolor: '#efefef', width: isNotData ? '100%' : 'auto', height: isNotData ? '100%' : 'auto'}}>
            {loading ? (
                <CenterLayout>
                    <Stack>
                        <Typography variant={'h5'}>
                            {t('print_loading')}
                        </Typography>
                    </Stack>
                </CenterLayout>
            ) : !data ? (
                <CenterLayout>
                    <Typography variant={'h5'}>
                        {t('data_not_found')}
                    </Typography>
                </CenterLayout>
            ) : !data.length ? (
                <CenterLayout>
                    <Typography variant={'h5'}>
                        {t('data_not_found')}
                    </Typography>
                </CenterLayout>
            ) : data.map(item => <Content key={item.id} data={item}/>)}
        </Stack>
    )
}

export default ReportComponent