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

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

import Loadable from 'components/Loadable';
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 [dataList, setDataList] = React.useState([]);
    const [selectedItem, setSelectedItem] = React.useState({});

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

    const loadList=()=>{
        HttpUtils.get({
            url: GET_SYS_PARAMS,
            onSuccess: (responseData)=>{
                setDataList(responseData);
            }
        });
    }

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

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


    return (
       
            <Grid container sx={{ minHeight: '90vh', 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={2} >
                            <Grid item xs={12} md={8} lg={8} >
                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }} >
                                    <Table
                                        dataList={dataList}
                                        onRowClick={onRowClick}
                                    />
                                </Box>
                            </Grid>
                            <Grid item xs={12} md={4} lg={4}>
                                <Box xs={12} sx={{ borderRadius: '10px', backgroundColor: '#fff' }}>
                                    <Form
                                        selectedItem={selectedItem}
                                        onSave={onSave}
                                    />
                                </Box>
                            </Grid>
                        </Grid>
                    </Grid>
                    {/*col 2*/}
                </>
            </Grid>
    );
};

export default SystemSetting;