// material-ui
import {Grid, Typography} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
//import axios from "axios";
import * as HttpUtils from "../../utils/HttpUtils";
import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom";
import FileList from "../../components/FileList"
import MainCard from "../../components/MainCard";
import UserInformationCard from "./UserInformationCard_Organization";
import LoadingComponent from "../extra-pages/LoadingComponent";
import * as UrlUtils from "../../utils/ApiPathConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserMaintainPage_Organization = () => {
    const params = useParams();
    const [userData, setUserData]  = useState({})
    const [isLoading, setLoding] = useState(true);


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

    const loadData = ()=>{
        setLoding(true);
        HttpUtils.get({
            url: `${apiPath}${UrlUtils.GET_USER_PATH}/${params.id}`,
            onSuccess: function(response){
                setUserData(response.data)
            }
        });
    };


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

    return (
        isLoading ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Typography variant="h5">Organization User</Typography>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <UserInformationCard
                                userData={userData}
                                loadDataFun={loadData}
                            />
                        </Grid>
                        <Grid item xs={12} md={12} lg={12}>
                            <MainCard elevation={0} border={false} content={false}>
                            <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                                Files
                            </Typography>
                                <FileList sx={{mt: 3, ml: 3, mb: 1}}
                                    refId={params.id}
                                    refType={"brFile"}
                                />
                            </MainCard>
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default UserMaintainPage_Organization;