// material-ui
import {
    Box,
    Grid, Typography
} from '@mui/material';
import AppreciationGenerateForm from "./AppreciationGenerateForm";
import {useContext, useEffect, useState} from "react";
import * as React from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_APPRECIATION_YEAR_COMBO_LIST} from "../../utils/ApiPathConst";
import LoadingComponent from "../extra-pages/LoadingComponent";

import {LIONER_FORM_THEME} from "../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";
import LocaleContext from "../../components/I18nProvider";
import SummaryGenerateForm from "./SummaryGenerateForm";

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

const GenerateReportPanel = () => {

    const [yearComboList, setYearComboList] = useState([]);
    const [onReady, setOnReady] = useState(false);
    const { setIsAdvanceDisplay } = useContext(LocaleContext);

    useEffect(() => {
        getTagList();
        setIsAdvanceDisplay(false);
    }, []);

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

    function getTagList() {
        axios.get(`${apiPath}${GET_APPRECIATION_YEAR_COMBO_LIST}`,
        )
            .then((response) => {
                if (response.status === 200) {
                    setYearComboList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={3} columnSpacing={2.75}>
                <ThemeProvider theme={LIONER_FORM_THEME}>
                    <Grid item xs={12} md={12} lg={12} sx={{mt:-1}}>
                        <Grid container justifyContent="flex-start" alignItems="center">
                            <Grid item xs={3} sx={{mb: -2}} >
                                <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                    <Typography align="center" variant="h5" >Report 1: Appreciations Case</Typography>
                                </Box>
                            </Grid>
                        </Grid>
                    </Grid>

                    {/*row 1*/}
                    <Grid item xs={12} md={12} lg={12}>
                        <AppreciationGenerateForm/>
                    </Grid>

                    {/*row 2*/}
                    <Grid item xs={12} md={12} lg={12} sx={{mt:-1}}>
                        <Grid container justifyContent="flex-start" alignItems="center">
                            <Grid item xs={3}>
                                <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                    <Typography align="center" variant="h5" >Report 2: Annex III - Summary of Appreciation Case</Typography>
                                </Box>
                            </Grid>
                        </Grid>
                    </Grid>

                    {/*row 3*/}
                    <Grid item xs={12} md={12} lg={12} sx={{mt:{lg:-1.5}}}>
                        <SummaryGenerateForm
                            yearComboList={yearComboList}
                        />
                    </Grid>
                </ThemeProvider>
            </Grid>

    );
};

export default GenerateReportPanel;
