// 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 Autocomplete from "@mui/material/Autocomplete";
import {
    subDivision1,
    subDivision2,
    subDivision3,
    subDivision4,
    subDivision5,
    subDivision6
} from "../pnspsUserSearchPage/DummyComboRecord";
import {useEffect, useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import LoadingComponent from "../extra-pages/LoadingComponent";
//import {useParams} from "react-router-dom";

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


const subDivisionArray = [
    ...subDivision1,
    ...subDivision2,
    ...subDivision3,
    ...subDivision4,
    ...subDivision5,
    ...subDivision6
];


const UserInformationCard = ({isCollectData, updateUserObject,userData}) => {
    //const params = useParams();
    const [currentUserData, setCurrentUserData] = React.useState({});
    const [subDivision, setSubDivision] = useState(null);
    const [locked, setLocked] = useState(false);
    const [isLotusNoteUser, setIsLotusNoteUser] = useState(false);
    const [lotusNoteUserList, setLotusNoteUserList] = useState([])
    const [selectedLotusUser, setSelectedLotusUser] = useState(null);

    const [onReady, setOnReady] = useState(false);
    const {register, getValues} = useForm()

    useEffect(() => {
        //TODO: Get lotus note user list
        setLotusNoteUserList([
            {
                key: 1,
                label: "user01",
                account: "user123456"
            },
            {
                key: 2,
                label: "user02",
                account: "userabcde1"
            },
            {
                key: 3,
                label: "user03",
                account: "user2001"
            },
            {
                key: 4,
                label: "user04",
                account: "user2000"
            },
            {
                key: 5,
                label: "user05",
                account: "user1999"
            },
        ])
    }, []);

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

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

    useEffect(() => {
        //upload latest data to parent
        const values = getValues();
        const objectData ={
            ...values,
            selectedLotusUser: selectedLotusUser,
            subDivision: subDivision,
            locked: locked,
        }
        updateUserObject(objectData);
    }, [isCollectData]);


    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>


                <form>
                    <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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                Lotus Note User:
                            </Grid>

                            <Grid item xs={1} s={1} md={1} lg={1}>
                                <Checkbox
                                    checked={isLotusNoteUser}
                                    onChange={(event) => setIsLotusNoteUser(event.target.checked)}
                                    name="isLotusNoteUser"
                                    color="primary"
                                    size="small"
                                />
                            </Grid>

                            <Grid item xs={6} s={6} md={6} lg={5}>
                                <Autocomplete
                                    disablePortal
                                    id="lotus-note-combo"
                                    value={selectedLotusUser === null ? null : selectedLotusUser}
                                    options={lotusNoteUserList}
                                    disabled={!isLotusNoteUser}
                                    onChange={(event, newValue) => {
                                        setSelectedLotusUser(newValue);
                                    }}
                                    renderInput={(params) => <TextField {...params} />}
                                />
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid container>
                        <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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Username:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("userName",
                                            {
                                                value: currentUserData.username,
                                            })}
                                        id='username'
                                        disabled
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Password:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("password")}
                                        id='password'
                                        disabled
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Full Name:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("fullName",
                                            {
                                                value: currentUserData.fullname,
                                            })}
                                        id='fullName'
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Post:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("post",
                                            {
                                                value: currentUserData.post,
                                            })}
                                        id='post'
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Sub-Division:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        disablePortal
                                        id="sub-division-combo"
                                        value={subDivision === null ? null : subDivision}
                                        options={subDivisionArray}
                                        onChange={(event, newValue) => {
                                            setSubDivision(newValue);
                                        }}
                                        renderInput={(params) => <TextField {...params} />}
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Email:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("email",
                                            {
                                                value: currentUserData.email,
                                            })}
                                        id='email'
                                    />
                                </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={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Phone:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("phone1",
                                            {
                                                value: currentUserData.phone1,
                                            })}
                                        id='phone1'
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    Locked:
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Checkbox
                                        checked={locked}
                                        onChange={(event) => setLocked(event.target.checked)}
                                        name="checked"
                                        color="primary"
                                        size="small"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>

                </form>
            </MainCard>
    );
};

export default UserInformationCard;
