// material-ui
import {
    FormControl,
    IconButton,
    Grid,
    InputAdornment,
    Typography, FormLabel,
    OutlinedInput,
    TextField
} 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 Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { useIntl } from "react-intl";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewRecord, editMode, createMode}) => {
    //const params = useParams();
    const [currentUserData, setCurrentUserData] = React.useState({});
    const [locked, setLocked] = useState(false);
    const [showPassword, setShowPassword] = React.useState(false);
    const [onReady, setOnReady] = React.useState(false);
    const [pw, setPw] = React.useState("");
    const [pwErr, setPwErr] = React.useState("");
    const { register, getValues } = useForm();

    const intl = useIntl();

    const handleClickShowPassword = () => setShowPassword((show) => !show);
    const handleMouseDownPassword = () => setShowPassword(!showPassword);

    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 && currentUserData.id !== undefined) {
            setLocked(currentUserData.locked);
            setOnReady(true);
        } else if (isNewRecord) {
            setLocked(false);
            setOnReady(true);
        }
    }, [currentUserData]);

    useEffect(() => {
        // console.log("num");
        // console.log(pw.match(/^(?=.*[0-9])/));
        // console.log("small char");
        // console.log(pw.match(/^(?=.*[a-z])/));
        // console.log("SpecialChar");
        // console.log(pw.match(/^(?=.*[!@#%&]?)/));
        setPwErr('');
        
        if (pw.length == 0) {
            setPwErr(intl.formatMessage({ id: 'requirePassword' }));
        } else if (pw.length < 8) {
            setPwErr(intl.formatMessage({ id: 'atLeast8CharPassword' }));
        } else if (pw.length > 60) {
            setPwErr(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: "" }));
        }
        else if (/\s/.test(pw) ) {
            setPwErr(intl.formatMessage({ id: 'noSpacePassword' }));
        } else if (! /[a-z]/.test(pw)) {
            setPwErr(intl.formatMessage({ id: 'atLeastOneSmallLetter' }));
        } else if (! /[A-Z]/.test(pw)) {
            setPwErr(intl.formatMessage({ id: 'atLeastOneCapLetter' }));
        } else if (! /[0-9]/.test(pw)) {
            setPwErr(intl.formatMessage({ id: 'atLeast1Number' }));
        } else if (! /[!@#%&]/.test(pw)) {
            setPwErr(intl.formatMessage({ id: 'atLeast1SpecialChar' }));
        }
    }, [pw]);

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


    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
                sx={{ margin: 0 }}
            >
                <Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, 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: 3 }}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel required>Username:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            required
                                            fullWidth
                                            size="small"
                                            {...register("username",
                                                {
                                                    value: currentUserData.username,
                                                })}
                                            id='username'
                                            disabled={!isNewRecord}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>
                        {
                            isNewRecord ?
                                <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={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel required>Password:</FormLabel>
                                        </Grid>

                                        <Grid item xs={7} s={7} md={7} lg={6}>
                                            <FormControl variant="outlined" fullWidth required>
                                                <TextField
                                                    variant="outlined"
                                                    fullWidth
                                                    size="small"
                                                    {...register("password")}
                                                    id='password'
                                                    type={showPassword ? 'text' : 'password'}
                                                    disabled={!isNewRecord}
                                                    error={pwErr}
                                                    helperText={pwErr}
                                                    onChange={(value) => {
                                                        setPw(value.target.value);
                                                    }}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <IconButton
                                                               aria-label={intl.formatMessage({
                                                                    id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                })}
                                                                onClick={handleClickShowPassword}
                                                                onMouseDown={handleMouseDownPassword}
                                                                edge="end"
                                                            >
                                                                {showPassword ? <VisibilityOff /> : <Visibility />}
                                                            </IconButton>
                                                        </InputAdornment>
                                                    }
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid> : null
                        }

                        <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={{  display: 'flex', alignItems: 'center' }}>
                                    <FormLabel required >Full Name:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    {/* <TextField
                                        fullWidth
                                        {...register("enName",
                                            {
                                                value: currentUserData.enName,
                                            })}
                                        id='enName'
                                    /> */}
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            required
                                            fullWidth
                                            size="small"
                                            {...register("enName",
                                                {
                                                    value: currentUserData.enName,
                                                })}
                                            id='enName'
                                            disabled={createMode?false:!editMode}
                                        />
                                    </FormControl>
                                </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={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel>Post:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            fullWidth
                                            size="small"
                                            {...register("post",
                                                {
                                                    value: currentUserData.post,
                                                })}
                                            id='post'
                                            disabled={createMode?false:!editMode}
                                        />
                                    </FormControl>
                                </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={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel required>Email:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            fullWidth
                                            size="small"
                                            {...register("emailAddress",
                                                {
                                                    value: currentUserData.emailAddress,
                                                })}
                                            id='emailAddress'
                                            disabled={createMode?false:!editMode}
                                        />
                                    </FormControl>
                                </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'}}>
                                    <FormLabel>Phone:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            fullWidth
                                            size="small"
                                            {...register("phone",
                                                {
                                                    value: currentUserData.phone,
                                                })}
                                            id='phone'
                                        />
                                    </FormControl>
                                </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={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel required>Locked:</FormLabel>
                                </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"
                                        disabled={!editMode}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>

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

export default UserInformationCard;
