// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button,
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const EmailTemplateTable = Loadable(React.lazy(() => import('pages/EmailTemplate/Search_GLD/DataGrid')))
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import MainCard from 'components/MainCard';
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
import { useNavigate } from "react-router";
import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";

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

const Index = () => {

    const [record, setRecord] = React.useState([]);
    const [onReady, setOnReady] = React.useState(false);
    const navigate = useNavigate()

    React.useLayoutEffect(() => {
        loadForm();
    }, []);

    React.useLayoutEffect(() => {
        setOnReady(true);
    }, [record]);

    const loadForm = () => {
        HttpUtils.get({
            url: UrlUtils.GET_EMAIL_LIST,
            onSuccess: (responseData) => {
                setRecord(responseData);
            }
        });
    }

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Email Template</Typography>
                            </Stack>
                        </div>
                    </Grid>
                    {/*row 1*/}
                    <Grid item xs={12} md={12} lg={12} width="100%">
                        <MainCard elevation={0}
                            border={false}
                            content={false}
                        >
                            <EmailTemplateTable
                                recordList={record}
                            />
                        </MainCard>
                    </Grid>
                    <Grid container direction="row"
                        justifyContent="space-between"
                        alignItems="center">
                        <Grid item xs={3} md={3} sx={{ mb:3, ml: 3, mr: 1 }}>
                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                            <Button
                                variant="contained"
                                onClick={()=>{navigate('/setting/emailTemplate/-1')}}
                                startIcon={<AddCircleOutlineIcon/>}
                            >

                                New Email Template

                            </Button>
                            </ThemeProvider>
                        </Grid>
                    </Grid>
                </Grid >
            )
    );
};

export default Index;