// material-uisubDivision
import {
    Button,
    FormControlLabel,
    Grid, TextField,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import { useForm } from "react-hook-form";
import {useState} from "react";
import Checkbox from "@mui/material/Checkbox";
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import { useNavigate } from "react-router";
// import axios from "axios";
// import { GET_EMAIL_LIST } from 'utils/ApiPathConst';
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";

import { isGrantedAny } from "auth/utils";

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


const UserSearchForm = ({ applySearch, onGridReady, searchCriteria }) => {
    const navigate = useNavigate();

    const [type, setType] = useState([]);
    const [locked, setLocked] = useState(searchCriteria.locked);
    const { reset, register, handleSubmit } = useForm()

    const onSubmit = (data) => {

        let typeArray = [];

        for (let i = 0; i < type.length; i++) {
            typeArray.push(type[i].label);
        }

        const temp = {
            username: data.userName,
            enName: data.fullenName,
            post: data.post,
            email: data.email,
            locked: locked,
            start:0,
            limit:10
        };
        applySearch(temp);
    };


    function resetForm() {
        setType([]);
        setLocked(false);
        reset({
            userName:"",
            fullenName:"",
            post:"",
            email:""
        });
        localStorage.setItem('searchCriteria',"")
        // axios.get(`${GET_EMAIL_LIST}`)
        //     .then(r => {
        //         console.log(r)
        //     })
        //     .catch(err => {
        //         console.log(err)
        //     })
    }

    const handleNewUserClick = () => {
        // console.log(id)
        navigate('/user/-1');
        // navigate('/user/' + id);
    };

    return (
        <MainCard xs={12} md={12} lg={12}
            border={false}
            content={false}
            sx={{ backgroundColor: '#fff' }}    
        >

            <form onSubmit={handleSubmit(onSubmit)}>
                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                    {/*row 1*/}
                    <Grid item justifyContent="space-between" alignItems="center" sx={{ mt: 1, ml: 3, mb: 2.5 }}>
                        <Typography variant="pnspsFormHeader" >
                            Search
                        </Typography>
                    </Grid>
                    {/*row 2*/}

                    <Grid container display="flex" alignItems={"center"}>
                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <TextField
                                fullWidth
                                {...register("userName")}
                                id='userName'
                                label="Username"
                                defaultValue={searchCriteria.username}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <TextField
                                fullWidth
                                {...register("fullenName")}
                                id="fullenName"
                                label="Full Name"
                                defaultValue={searchCriteria.enName}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <TextField
                                fullWidth
                                {...register("post")}
                                id="post"
                                label="Post"
                                defaultValue={searchCriteria.post}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <TextField
                                fullWidth
                                {...register("email")}
                                id="email"
                                label="Email"
                                defaultValue={searchCriteria.email}
                                InputLabelProps={{
                                    shrink: true
                                }}
                            />
                        </Grid>

                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                            <FormControlLabel
                                control={
                                    <Checkbox
                                        checked={locked}
                                        onChange={(event) => setLocked(event.target.checked)}
                                        name="checked"
                                        color="primary"
                                        size="small"
                                    />
                                }
                                label={<Typography variant="h6">Locked</Typography>}
                            />
                        </Grid>
                    </Grid>

                    {/*last row*/}
                    <Grid container direction="row"
                        justifyContent="space-between"
                        alignItems="center">
                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>

                            {isGrantedAny(["MAINTAIN_USER", "MAINTAIN_GLD_USER"]) ?
                                <Grid item xs={3} md={3} sx={{ ml: 3, mb: 3 }}>
                                    <Button
                                        variant="contained"
                                        onClick={handleNewUserClick}
                                        startIcon={<AddCircleOutlineIcon />}
                                    >
                                        New User
                                    </Button>
                                </Grid>
                                : <Grid item xs={3} md={3} sx={{ ml: 3, mb: 3 }}></Grid>
                            }

                            <Grid item xs={8} md={8}>
                                <Grid container maxWidth justifyContent="flex-end">
                                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, }}>
                                        <Button
                                            variant="contained"
                                            color="cancel"
                                            onClick={resetForm}
                                        >
                                            Reset
                                        </Button>
                                    </Grid>

                                    <Grid item sx={{ mb: 3 }}>
                                        <Button
                                            variant="contained"
                                            type="submit"
                                            disabled={onGridReady}
                                        >
                                            Search
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ThemeProvider>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default UserSearchForm;
