// material-ui
import {
    Box,
    Button,
    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_GROUP_LIST_PATH} from "../../utils/ApiPathConst";
import * as React from "react";

//import LoadingComponent from "../extra-pages/LoadingComponent";
// import UserGroupSearchForm from "./UserGroupSearchForm";
// import UserGroupTable from "./UserGroupTable";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));

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

const UserGroupSearchPanel = () => {

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

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

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

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

    function getGroupList() {
        axios.get(`${apiPath}${GET_GROUP_LIST_PATH}`,
            {params: searchCriteria}
        )
            .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={4.5} columnSpacing={2.75}>
                <Grid item xs={12} md={12} lg={12}>
                    <Grid container justifyContent="flex-start" alignItems="center">
                        <Grid item xs={1} sx={{mb: -2.25}} >
                            <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                <Typography align="center" variant="h5" sx={{mb:2}}>View User Group</Typography>
                            </Box>
                        </Grid>
                        <Grid item xs={1} sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                            >
                                Create
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>

                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12}>
                    <UserGroupSearchForm applySearch={applySearch}/>
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                              border={false}
                              content={false}
                    >
                        <UserGroupTable
                            recordList={record}
                        />
                    </MainCard>
                </Grid>

            </Grid>

    );
};

export default UserGroupSearchPanel;