// material-ui
import {
    Button,
    Grid, Typography
} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {useParams} from "react-router-dom";
import UserInformationCard from "./UserInformationCard";
import LoadingComponent from "../extra-pages/LoadingComponent";
import UserGroupCard from "./UserGroupCard";
import UserAuthorityCard from "./UserAuthorityCard";
import {GET_USER_PATH} from "../../utils/ApiPathConst";

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


const UserMaintainPage = () => {
    const params = useParams();
    const [userData, setUserData] = React.useState({});
    const [onReady, setOnReady] = useState(false);
    const [isCollectData, setIsCollectData] = useState(false);
    const [editedCustomerData, setEditedCustomerData] = useState({});
    const [userGroupData,setUserGroupData] = useState([]);
    const [userAuthData,setUserAuthData] = useState([]);
    const [userConfirm, setUserConfirm] = useState(false);

    function updateUserObject(userData) {
        setEditedCustomerData(userData);
    }

    function updateUserGroupList(userGroupData){
        setUserGroupData(userGroupData);
    }

    function updateUserAuthList(userAuthData){
        setUserAuthData(userAuthData);
    }

    const submitData = () => {
        setUserConfirm(true);
        setIsCollectData(!isCollectData);
    }

    useEffect(() => {
        console.log(params)
        axios.get(`${apiPath}${GET_USER_PATH}/${params.id}`)
            .then((response) => {
                if (response.status === 200) {
                    setUserData(response.data);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }, []);

    useEffect(() => {
        setOnReady(true);
    }, [userData]);

    useEffect(() => {
        if(userConfirm && onReady){
            console.log("update in parents");
            console.log(editedCustomerData);
            console.log(userGroupData);
            console.log(userAuthData);
        }
        setUserConfirm(false);
    }, [editedCustomerData,userGroupData,userAuthData]);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Typography variant="h5">Maintain User</Typography>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} md={5} lg={5}>
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <UserInformationCard
                                updateUserObject={updateUserObject}
                                userData={userData}
                                isCollectData={isCollectData}
                            />
                        </Grid>

                        <Grid item xs={12} md={12} lg={12} sx={{mt: 3}}>
                            <UserGroupCard
                                updateUserGroupList={updateUserGroupList}
                                userData={userData}
                                isCollectData={isCollectData}
                            />
                        </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
                <Grid item xs={12} md={7} lg={7}>
                    <UserAuthorityCard
                        updateUserAuthList={updateUserAuthList}
                        userData={userData}
                        isCollectData={isCollectData}
                    />
                </Grid>

                {/*bottom button*/}
                <Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"end"} justifyContent="center">
                    <Grid container maxWidth justifyContent="flex-end">
                        <Grid item sx={{ml: 3, mr: 3}}>
                            <Button
                                size="large"
                                variant="contained"
                                type="submit"
                                sx={{
                                    textTransform: 'capitalize',
                                    alignItems: 'end'
                                }}
                                onClick={submitData}
                            >
                                Save User
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
    );
};

export default UserMaintainPage;
