// material-ui
import {
    // Button,
    Grid,
    Typography,
    Stack,
    Box,
} from '@mui/material';
import { useEffect, useState } from "react";
import * as React from "react";
import axios from "axios";
// import { useNavigate, 
    // useParams
// } from "react-router-dom";
import { GLD_USER_PROFILE_PATH, 
    // DELETE_USER, 
    // POST_ADMIN_USER_REGISTER
} from "utils/ApiPathConst";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// const UserGroupCard = Loadable(lazy(() => import('./UserGroupCard')));
// const UserAuthorityCard = Loadable(lazy(() => import('./UserAuthorityCard')));
import {
    // GeneralConfirmWindow,
    // getDeletedRecordWithRefList,
    // notifyDeleteSuccess,
    // notifySaveSuccess,
} from "utils/CommonFunction";
// import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

import {
    getUserId,
} from "utils/Utils";

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


const UserMaintainPage = () => {
    // const params = useParams();
    // const navigate = useNavigate();
    const [userData, setUserData] = React.useState({});
    const [onReady, setOnReady] = useState(false);
  
    useEffect(() => {
        axios.get(`${GLD_USER_PROFILE_PATH}/${getUserId()}`)
            .then((response) => {
                if (response.status === 200) {
                    setUserData(response.data);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }, []);

    useEffect(() => {
        if (Object.keys(userData).length > 0 && userData !== undefined) {
            setOnReady(true);
        }
    }, [userData]);

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <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" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                My Profile
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
        
                {/*col 1*/}
                <Grid item xs={12}>
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <Box xs={12} ml={4} mt={3} mr={4} mb={4} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
                                <UserInformationCard
                                    userData={userData}
                                />
                            </Box>
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}

            </Grid>
    );
};

export default UserMaintainPage;