// material-ui
import {
    Box,
    Grid, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import TemplateSearchForm from "./TemplateSearchForm";
import TemplateTable from "./TemplateTable";
import { useEffect, useState} from "react";
import axios from "axios";
import {apiPath, getUserData} from "../../auth/utils";
import {GET_SEARCH_TEMPLATE_PATH} from "../../utils/ApiPathConst";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as React from "react";

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

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



const SearchTemplatePanel = () => {

    const [record, setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const [onReady, setOnReady] = useState(false);

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

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

    useEffect(() => {
        getGroupList();
    }, [searchCriteria]);

    function getGroupList() {
        const userData = getUserData();
        const temp = {
            ...searchCriteria,
            "userId": userData.id,
        }
        axios.get(`${apiPath}${GET_SEARCH_TEMPLATE_PATH}`,
            {params: temp}
        )
            .then((response) => {
                if (response.status === 200) {
                    setRecord(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

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


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

            {/*row 1*/}
            <ThemeProvider theme={LIONER_FORM_THEME}>
            <Grid item xs={12} md={12} lg={12}>
                <TemplateSearchForm applySearch={applySearch}/>
            </Grid>
            {/*row 2*/}
            <Grid item xs={12} md={12} lg={12}>
                <MainCard elevation={0}
                          content={false}
                          sx={{width:CARD_MAX_WIDTH}}
                >
                    <TemplateTable
                        recordList={record}
                    />
                </MainCard>
            </Grid>
            </ThemeProvider>
        </Grid>

    );
};

export default SearchTemplatePanel;
