// material-ui
import {
    Grid, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {
    GET_APPRECIATION_LIST,
     GET_SBU_DIVISION_COMBO_LIST,
} from "../../utils/ApiPathConst";
import * as React from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import AppreciationTable from "./AppreciationTable";
import AppreciationSearchForm from "./AppreciationSearchForm";
import Qs from "qs";
import {isObjEmpty} from "../../utils/Utils";

import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";

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

const AppreciationSearchPage = () => {
    const [record,setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const [onReady, setOnReady] = useState(false);
    const [expanded, setExpanded] = React.useState(true);
    const userSubDivisionId = localStorage.getItem('subDivisionId');
    const [divRef, setDivRef] = useState([]);
    const [isFetchDivision, setIsFetchDivision] = useState(false);

    function getDivisionRef(){
        axios.get(`${apiPath}${GET_SBU_DIVISION_COMBO_LIST}`,{
            params:{
                id: userSubDivisionId
            }
        })
            .then((response) => {
                if (response.status === 200) {
                    setDivRef(response.data.records);
                    setIsFetchDivision(true);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    useEffect(() => {
        getDivisionRef();
    }, []);

    useEffect(() => {
        if(isFetchDivision){
            getAwardList();
        }
    }, [isFetchDivision]);

    useEffect(() => {
        if(!isObjEmpty(searchCriteria)){
            getAwardList();
        }
    }, [searchCriteria]);

    function getAwardList(){
        const params = {
            ...searchCriteria,
        }
        axios.get(`${apiPath}${GET_APPRECIATION_LIST}`, {
            params: params,
            paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            }
        )
            .then((response) => {
                if (response.status === 200) {
                    setRecord(response.data.records);
                    setOnReady(true);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function applySearch(input) {
        setSearchCriteria(input);
    }

    return (
        !onReady ?
            <LoadingComponent/>
            :
        <Grid container rowSpacing={3} columnSpacing={2.75}>
            <ThemeProvider theme={LIONER_FORM_THEME}>
            <Grid item xs={12} md={12} lg={12}>
                <Grid container maxWidth justifyContent="space-between" sx={{mt:-2, width:CARD_MAX_WIDTH}} >
                    <Grid item xs={4} s={4} md={4} lg={4}
                          sx={{ mt:1.1, mb: -1, display: 'flex', alignItems: 'center'}}>
                        <Typography variant="h5">Search Appreciation Record</Typography>
                    </Grid>

                </Grid>
            </Grid>

            {/*row 1*/}
            <Grid item xs={12} md={12} lg={12}>
                <AppreciationSearchForm
                    applySearch={applySearch}
                    setExpanded={setExpanded}
                    expanded={expanded}
                />
            </Grid>
            {/*row 2*/}
            <Grid item xs={12} md={12} lg={12}>
                <MainCard elevation={0}
                          content={false}
                          sx={{mt:{lg:-1.5}, width:CARD_MAX_WIDTH}}
                >
                    <div style={{/*height: expanded? '32vh': '76vh',*/ width: '100%'}}>
                        <AppreciationTable
                            recordList={record}
                            divisionRef={divRef}
                            expanded={expanded}
                            pageSize={10}
                        />
                    </div>
                </MainCard>
            </Grid>
            </ThemeProvider>
        </Grid>

    );
};

export default AppreciationSearchPage;
