// material-ui
import * as React from "react";

import { Grid, Typography, Button, Stack } from '@mui/material';
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from 'utils/DateUtils';
import ForwardIcon from '@mui/icons-material/Forward';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
import Loadable from 'components/Loadable';
import { useNavigate } from "react-router-dom";
import {getObjectByValue} from "utils/CommonFunction";
import * as ComboData from "utils/ComboData";
const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));
const UserInformationPubCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual_Pub')));

import {
    isGLDLoggedIn,
    isINDLoggedIn,
    isORGLoggedIn
} from "utils/Utils";
import {FormattedMessage} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserMaintainPage_Individual = () => {
    const params = useParams();
    const navigate = useNavigate();
    const [formData, setFormData] = React.useState({})
    const [isLoading, setLoding] = React.useState(true);

    React.useEffect(() => {
        if (isORGLoggedIn()){
            navigate('/dashboard');
        }else{
            loadData();
        }
    }, []);

    const loadData = () => {
        setLoding(true);
        if (isGLDLoggedIn()){
            HttpUtils.get({
                url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
                onSuccess: function (response) {
                    response.data["address"] = JSON.parse(response.data["address"]);
                    response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
                    response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
    
                    let createDate = DateUtils.datetimeStr(response.data.created);
                    let modifiedBy = DateUtils.datetimeStr(response.data.modified) + ", " + response.data.modifiedBy;
                    response.data["createDate"] = createDate;
                    response.data["modifieDate"] = modifiedBy;
                    response.data["verifiedStatus"] = response.data.verifiedBy ? DateUtils.datetimeStr(response.data.verifiedDate) + ", " + response.data.verifiedByName : "Not verified";
    
                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
                    response.data["addressLine1"] = response.data.address?.addressLine1;
                    response.data["addressLine2"] = response.data.address?.addressLine2;
                    response.data["addressLine3"] = response.data.address?.addressLine3;
    
                    response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
                    response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
    
                    response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                    response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
    
                    response.data["lastLoginDate"] = response.data.lastLogin ? DateUtils.datetimeStr(response.data.lastLogin) : "";
    
                    setFormData(response.data);
                }
            });
        }
        if (isINDLoggedIn()){
            HttpUtils.get({
                url: `${UrlUtils.GET_PUB_IND_USER_PATH}`,
                onSuccess: function (response) {
                    response.data["address"] = JSON.parse(response.data["address"]);
                    response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
                    response.data["faxNo"] = JSON.parse(response.data["faxNo"]);
    
                    response.data["country"] = getObjectByValue(ComboData.country, "key", response.data.address?.country);
                    response.data["district"] = getObjectByValue(ComboData.district, "key", response.data.address?.district);
                    response.data["addressLine1"] = response.data.address?.addressLine1;
                    response.data["addressLine2"] = response.data.address?.addressLine2;
                    response.data["addressLine3"] = response.data.address?.addressLine3;
    
                    response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
                    response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
    
                    response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                    response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
        
                    setFormData(response.data);
                }
            });
        }
    };


    React.useEffect(() => {
        setLoding(false);
    }, [formData]);

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container direction="column" sx={{minHeight: '90vh', backgroundColor: isGLDLoggedIn()?'backgroundColor.default':'#ffffff', maxWidth:'100%' }}>
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                        {isGLDLoggedIn()?
                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                Maintain Individual User
                            </Typography>
                        :
                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                <FormattedMessage id="userProfile" />
                            </Typography>
                        }
                        </Stack>
                    </div>
                </Grid>
                <Grid item xs={12}>
                    <Button title="Back"
                            sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }}
                            variant="outlined" onClick={() => { navigate(-1) }}
                    >
                        <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                    </Button>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} sm={12} md={12} lg={12} >
                    <Grid container>
                        {isGLDLoggedIn()?
                            <Grid item xs={12} sm={12} md={12} lg={12} >
                                <UserInformationCard
                                    formData={formData}
                                    loadDataFun={loadData}
                                />
                            </Grid>
                        :isINDLoggedIn()?
                            <Grid item xs={12} sm={12} md={12} lg={12} >
                                <UserInformationPubCard
                                    formData={formData}
                                    loadDataFun={loadData}
                                />
                            </Grid>
                            :null
                        }
                        {isGLDLoggedIn()?
                            <Grid item xs={12} md={12} lg={12}>
                                <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
                                    <Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
                                        Files
                                    </Typography>
                                    <Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
                                        <FileList
                                            refId={params.id}
                                            refType={"identification"}
                                        />
                                    </Grid>
                                </MainCard>
                                <br />
                            </Grid>
                            :null
                        }
                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default UserMaintainPage_Individual;
