
import {
    Grid,
    Typography,
    Stack,
    Button,
    Dialog, DialogTitle, DialogContent, DialogActions,
    // Box,
} from '@mui/material';
import * as React from "react";

import { GET_SYS_PARAMS, GET_PAYMENT_SUSPENSION_MODE, UPDATE_PAYMENT_SUSPENSION_MODE } from "utils/ApiPathConst";

import Loadable from 'components/Loadable';
import MainCard from "components/MainCard";
const Table = Loadable(React.lazy(() => import('./Table')));
const Form = Loadable(React.lazy(() => import('./Form')));

import { notifyActionSuccess } from 'utils/CommonFunction';

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

import * as HttpUtils from "utils/HttpUtils";

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SystemSetting = () => {
    const [searchCriteria, setSearchCriteria] = React.useState({});
    const [selectedItem, setSelectedItem] = React.useState({});
    const [reloadTime, setReloadTime] = React.useState(new Date())
    const [isPopUp, setIsPopUp] = React.useState(false);
    const [refreshTrigger, setRefreshTrigger] = React.useState(0);
    const [suspensionMode, setSuspensionMode] = React.useState();
    const [onReady, setOnReady] = React.useState(false);

    const forceRefresh = () => {
        setRefreshTrigger(prev => prev + 1);
    };

    React.useEffect(()=>{
        setSearchCriteria({})
        loadPaymentSuspension()
    }, []);

    React.useEffect(() => {
        setOnReady(true);
    }, [suspensionMode]);

    const onRowClick = (param) => {
        setSelectedItem(param.row);
    }

    React.useEffect(() => {
        searchCriteria.reloadTime = reloadTime;
        setSearchCriteria(searchCriteria);
    }, [reloadTime]);

    const onSave = (param) => {
        HttpUtils.post({
            url: GET_SYS_PARAMS + "/update",
            params: {
                name: param.name,
                value: param.value
            },
            onSuccess: () => {
                notifyActionSuccess();
                setReloadTime(new Date());
                // forceRefresh()
            }
        });
    }

    const loadPaymentSuspension = () => {
        HttpUtils.get({
            url: GET_PAYMENT_SUSPENSION_MODE,
            onSuccess: (responseData) => {
                setSuspensionMode(responseData)
            }
        });
    }
    
    const onPaymentSuspension = () => {
        setIsPopUp(false);
        HttpUtils.post({
            url: UPDATE_PAYMENT_SUSPENSION_MODE,
            onSuccess: (responseData) => {
                setSuspensionMode(responseData)
                notifyActionSuccess();
                setReloadTime(new Date());
                forceRefresh()
            }
        });
    }

    return (

        <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column"
            justifyContent="flex-start">
            <>
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4">System Setting</Typography>
                        </Stack>
                    </div>
                </Grid>

                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container direction="row" sx={{ p: 2 }} spacing={1} >
                        <Grid item xs={12} sm={8} md={8} lg={8} >
                            <Grid container>
                                <Grid item xs={12} md={12}>
                                    <MainCard elevation={0}
                                        border={false}
                                        content={false}
                                    >
                                        <Table
                                            searchCriteria={searchCriteria}
                                            onRowClick={onRowClick}
                                            refreshTrigger={refreshTrigger}
                                        />
                                    </MainCard>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} sm={4} md={4} lg={4}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} md={12}>
                                    <MainCard elevation={0}
                                        border={false}
                                        content={false}
                                    >
                                        <Form
                                            selectedItem={selectedItem}
                                            onSave={onSave}
                                        />
                                    </MainCard>
                                </Grid>
                            </Grid>    
                        </Grid>
                        <Grid item xs={12} sm={4} md={4} lg={4}>
                            {onReady?
                                <Grid container mb={2}>
                                    <Grid item xs={12} md={12}>
                                        <Button
                                            variant="contained"
                                            color="red"
                                            onClick={()=>{
                                                setIsPopUp(true);
                                            }}
                                        >
                                            {suspensionMode?"Cancel Payment Suspension Mode":"Enable Payment Suspension Mode"}
                                        </Button>
                                    </Grid>
                                </Grid>:null
                            }
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
                <div>
                    <Dialog
                        open={isPopUp}
                        onClose={() => setIsPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}
                    >
                        <DialogTitle>Payment Suspension Mode</DialogTitle>
                        <DialogContent style={{ display: 'flex', }}>
                            <Typography variant="h5" style={{ padding: '16px' }}>{suspensionMode?"Cancel payment suspension mode?":"Enable payment suspension mode?"}</Typography>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                            <Button onClick={() => onPaymentSuspension()}><Typography variant="h5">Confirm</Typography></Button>
                        </DialogActions>
                    </Dialog>
                </div>
            </>
        </Grid>
    );
};

export default SystemSetting;
