// material-ui
import {
    Button,
    CardContent, Divider, FormControlLabel,
    Grid, InputAdornment, Switch, TextField
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";
import {useState} from "react";

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

const PasswordPolicyPage = () => {

    const { reset, register, handleSubmit } = useForm()
    const [aNonA, setANonA] = useState(false);
    const [needSpecialCharacter, setNeedSpecialCharacter] = useState(false);
    const [noUsernameAsPart, setNoUsernameAsPart] = useState(false);
    const [noIdenticalChar, setNoIdenticalChar] = useState(false);

    const onSubmit = (data) => {
        console.log(data);
        console.log(aNonA)
    };

    function resetForm(){
        setANonA(false);
        reset();
    }
    return (
        <Grid container rowSpacing={4.5} columnSpacing={2.75} justifyContent="center">
            <Grid item xs={12} md={11} lg={10} >
                <MainCard xs={12} md={12} lg={12}
                          border={false}
                          content={false}>

                    <form onSubmit={handleSubmit(onSubmit)}>
                        {/*Title*/}
                        <CardContent sx={{ px: 2.5, pt: 3 }}>
                            <Grid item justifyContent="space-between" alignItems="center">
                                Password Policy
                            </Grid>
                        </CardContent>

                        <Grid container alignItems={"center"} justifyContent="center">
                            {/*row 1*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Length of Password
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5} justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("syncDateCount")}
                                            id='syncDateCount'
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 2*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Change Password (days)
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5}justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("idleLogoutTime")}
                                            id="idleLogoutTime"
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">days</InputAdornment>,
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 3*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Password History
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5}justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("passwordHistory")}
                                            id="passwordHistory"
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 4*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Maximum number of login failure
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5}justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("maxLoginFailure")}
                                            id="maxLoginFailure"
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 5*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Penalty time of login failure (minutes)
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5}justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("loginFailPenaltyTime")}
                                            id="loginFailPenaltyTime"
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">minutes</InputAdornment>,
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 6*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>

                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                        Disable After (days)
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5}justifyContent="space-between" alignItems="right">
                                        <TextField
                                            fullWidth
                                            {...register("disableAfterCount")}
                                            id="disableAfterCount"
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">days</InputAdornment>,
                                            }}
                                        />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            <Grid item xs={12} s={12} md={12} lg={12} />
                            {/*row 7*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3}}>
                                    <Grid item xs={12} s={12} md={12} lg={5} sx={{ml:3, mr:3, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                                        Generate Password:
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 8*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3, justifyContent: 'center', alignItems: 'center'}}>
                                    <Grid item xs={1} s={1} md={3} lg={3} />
                                    <Grid item xs={11} s={11} md={9} lg={9} justifyContent="center" alignItems="center">
                                        <FormControlLabel sx={{display: 'flex', justifyContent: 'start', alignItems: 'center'}} control={
                                            <Switch
                                                onChange={(event, newValue) => {
                                                    setANonA(newValue);
                                                }}
                                                checked={aNonA}
                                            />
                                        } label="Contain at least one alphabetic and non-alphabetic character" />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 9*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3, justifyContent: 'center', alignItems: 'center'}}>
                                    <Grid item xs={1} s={1} md={3} lg={3} />
                                    <Grid item xs={11} s={11} md={9} lg={9} justifyContent="center" alignItems="center">
                                        <FormControlLabel sx={{display: 'flex', justifyContent: 'start', alignItems: 'center'}} control={
                                            <Switch
                                                onChange={(event, newValue) => {
                                                    setNeedSpecialCharacter(newValue);
                                                }}
                                                checked={needSpecialCharacter}
                                            />
                                        } label="Contain at least one special character (eg. #,$,@ etc)" />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 10*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3, justifyContent: 'center', alignItems: 'center'}}>
                                    <Grid item xs={1} s={1} md={3} lg={3} />
                                    <Grid item xs={11} s={11} md={9} lg={9} justifyContent="center" alignItems="center">
                                        <FormControlLabel sx={{display: 'flex', justifyContent: 'start', alignItems: 'center'}} control={
                                            <Switch
                                                onChange={(event, newValue) => {
                                                    setNoUsernameAsPart(newValue);
                                                }}
                                                checked={noUsernameAsPart}
                                            />
                                        } label="Not contain the username as part of password" />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*row 11*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}}>
                                <Grid container sx={{mb:3, justifyContent: 'center', alignItems: 'center'}}>
                                    <Grid item xs={1} s={1} md={3} lg={3} />
                                    <Grid item xs={11} s={11} md={9} lg={9} justifyContent="center" alignItems="center">
                                        <FormControlLabel sx={{display: 'flex', justifyContent: 'start', alignItems: 'center'}} control={
                                            <Switch
                                                onChange={(event, newValue) => {
                                                    setNoIdenticalChar(newValue);
                                                }}
                                                checked={noIdenticalChar}
                                            />
                                        } label="Contain no more than three identical consecutive characters" />
                                    </Grid>
                                </Grid>
                                <Divider variant="middle" />
                            </Grid>

                            {/*last row*/}
                            <Grid item s={12} md={9} lg={8} sx={{ml:3, mr:3, mb:3}} alignItems={"center"} justifyContent="center">
                                <Grid container maxWidth justifyContent="flex-end">
                                    <Grid item sx={{ml:3, mr:3}}>
                                        <Button
                                            size="large"
                                            variant="contained"
                                            onClick={resetForm}
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            Clear
                                        </Button>
                                    </Grid>

                                    <Grid item sx={{ml:3, mr:3}}>
                                        <Button
                                            size="large"
                                            variant="contained"
                                            type="submit"
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            Save Change
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </form>
                </MainCard>
            </Grid>

        </Grid>

    );
};

export default PasswordPolicyPage;
