// material-ui
import {
    Grid, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import { useForm } from "react-hook-form";
import { useEffect, useState } from "react";
//import LoadingComponent from "../extra-pages/LoadingComponent";
//import {useParams} from "react-router-dom";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));

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

const UserGroupInfoCard = ({ isCollectData, updateGroupObject, userGroupData , editMode}) => {
    //const params = useParams();
    const [currentUserGroupData, setCurrentUserGroupData] = React.useState({});
    const [onReady, setOnReady] = useState(false);
    const { register, getValues } = useForm()

    const [_editMode, setEditMode] = useState(editMode);

    useEffect(()=>{
        setEditMode(editMode);
    },[editMode])


    useEffect(() => {
        //if user data from parent are not null
        if (Object.keys(userGroupData).length > 0 && userGroupData !== undefined) {
            setCurrentUserGroupData(userGroupData.data);
        }
    }, [userGroupData]);

    useEffect(() => {
        //if state data are ready and assign to different field
        if (Object.keys(userGroupData).length > 0 && currentUserGroupData !== undefined) {
            setOnReady(true);
        }
    }, [currentUserGroupData]);

    useEffect(() => {
        //upload latest data to parent
        const values = getValues();
        const objectData = {
            ...values,
        }
        updateGroupObject(objectData);
    }, [isCollectData]);


    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Typography variant="h4" sx={{ mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black" }}>
                    Information
                </Typography>

                <form>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 2 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                    sx={{ mr: 3, display: 'flex', alignItems: 'center' }}>
                                    <Typography variant="h5">User Group Name:</Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        disabled={!_editMode}
                                        {...register("userGroupName",
                                            {
                                                value: currentUserGroupData.name,
                                            })}
                                        id='groupName'
                                        required
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                    sx={{ mr: 3, display: 'flex', alignItems: 'center' }}>
                                    <Typography variant="h5">User Group Description:</Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("description",
                                            {
                                                value: currentUserGroupData.description,
                                            })
                                        }
                                        disabled={!_editMode}
                                        id='description'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default UserGroupInfoCard;
