// 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_TEMPLATE_PATH } from "../../../utils/ApiPathConst";
import * as React from "react";
import LoadingComponent from "../../extra-pages/LoadingComponent";
import TemplateTable from "./TemplateTable";
import TemplateSearchForm from "./TemplateSearchForm";
import Qs from "qs";
// import Autocomplete from "@mui/material/Autocomplete";
import {isObjEmpty} from "../../../utils/Utils";
import {isFormEmpty} from "../../../utils/CommonFunction";
// import UploadContext from "../../components/UploadProvider";
// import {useLocation} from "react-router-dom";
// import dayjs from "dayjs";

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

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

const TemplateSearchPage = () => {
    const [onReady, setOnReady] = useState(false);
    const [expanded, setExpanded] = React.useState(true);
    const [record,setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const params = useParams();

    function getTemplateList() {
        axios.get(`${apiPath}${GET_TEMPLATE_PATH}`, {
                params: searchCriteria,
                // params: isInit? temp : searchCriteria,
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            }
        )
            .then((response) => {
                if (response.status === 200) {
                    // if (!isFormEmpty(searchCriteria) && !isObjEmpty(response.data.records)) {
                    //     setExpanded(false);
                    // }
                    setRecord(response.data.records);
                    setOnReady(true);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    useEffect(() => {
        setSearchCriteria({clientId: params.id,
            ...searchCriteria});
    }, [params.id]);

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

    function applySearch(input) {
        setSearchCriteria({clientId: params.id,
            ...input});
    }

    return (
        <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={{ mb: -2.25, display: 'flex', alignItems: 'center'}}>
                            <Typography variant="h4">Manage Template Form</Typography>
                        </Grid>
                    </Grid>
                </Grid>

                {/* Search Form */}
                <Grid item xs={12} md={12} lg={12}>
                    <TemplateSearchForm
                        // isUpdating={isUpdating}
                        // setIsUpdating={setIsUpdating}
                        applySearch={applySearch}
                        // refTemplateData={refTemplateData}
                        // getTemplateList={getTemplateList}
                        setExpanded={setExpanded}
                        expanded={expanded}
                        clientId={params.id}
                        // userDivision={userDivision}
                    />
                </Grid>

                {!onReady? <LoadingComponent/> :
                // Template Table
                <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? '46vh' : '75vh',*/ width: '100%'}}>
                            <TemplateTable
                                recordList={record}
                                pageSize={10}
                                expanded={expanded}
                                clientId={params.id}
                                applySearch={applySearch}
                            />
                        </div>
                    </MainCard>
                </Grid>
                }
            </ThemeProvider>
        </Grid>

    );
};

export default TemplateSearchPage;