// material-ui
import {Grid, Typography, Stack, Box} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import {useParams} from "react-router-dom";
import {useNavigate} from "react-router-dom";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";
import {getObjectByType} from "utils/CommonFunction";
import * as ComboData from "utils/ComboData";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));

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'
}
// ==============================|| DASHBOARD - DEFAULT ||============================== //


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


    useEffect(()=>{
        // console.log(formData);
        loadData();
    },[]);

    const loadData = ()=>{
        setLoding(true);
        if(params.id>0){
            HttpUtils.get({
                url: UrlUtils.GET_ORG_FROM_USER_PATH+"/"+params.id,
                onSuccess: function(response){
                    response.data["country"] = getObjectByType(ComboData.country, "type", response.data.addressTemp?.country);
                    response.data["district"] = getObjectByType(ComboData.district, "type", response.data.addressTemp?.district);
                    response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                    response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                    response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
                    
                    response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                    response.data["tel_countryCode"] = response.data.contactTel?.countryCode;

                    response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                    response.data["fax_countryCode"] = response.data.faxNo?.countryCode;

                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
                    setFormData(response.data)
                }
            });
        }else{
            navigate('/org/0');
        }
    };


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

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container direction="column" sx={{minHeight: '87vh',backgroundColor:'#ffffff' }}>
                <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' }}}>
                                Organisation (Create From User)
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ p: 1, borderRadius: '10px' }}>
                                <InfoCard
                                    userData={formData}
                                    userId={params.id}
                                />
                            </Box>
                        </Grid>

                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default OrganizationDetailPage_FromUser;