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

import {useEffect, useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from "@mui/material/Checkbox";
import * as React from "react";
import {apiPath} from "../../auth/utils";
// import {GET_USER_GROUP_COMBO_LIST} from "../../utils/ApiPathConst";
import {useNavigate} from 'react-router-dom';
import {ThemeProvider} from "@emotion/react";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {USER_GROUP_COMBO} from "../../utils/ComboConst";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

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

const UserSearchForm = ({applySearch}) => {

    const navigate = useNavigate()
    const [type, setType] = useState([]);
    const [userGroup, setUserGroup] = useState(null);
    const [selectedUserType, setSelectedUserType] = useState(null);
    const [userGroupList, setUserGroupList] = useState([]);
    const [locked, setLocked] = useState(false);


    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,
            fullname: data.fullName,
            post: data.post,
            groupId: userGroup !== null ? userGroup.id : null,
            email: data.email,
            phone: data.phone,
            locked: locked,
            twoFactorEnabled: twoFactorEnabled,
        };
        applySearch(temp);
    };

    useEffect(() => {
        // axios.get(`${apiPath}${GET_USER_GROUP_COMBO_LIST}`)
        //     .then((response) => {
        //         if (response.status === 200) {
        //             setUserGroupList(response.data.records);
        //         }
        //     })
        //     .catch(error => {
        //         console.log(error);
        //         return false;
        //     });

    }, []);

    function resetForm(){
        setType([]);
        setUserGroup(null);
        setSelectedUserType(null);
        setLocked(false);
        reset();
    }

    function createNewUser(){
        navigate('/user/-1');
    }

    return (
        <MainCard xs={12} md={12} lg={12}
                  content={false}
                  sx={{width:CARD_MAX_WIDTH}}
        >

            <form onSubmit={handleSubmit(onSubmit)}>
                {/*row 1*/}
                <Grid sx={{mb:2}}/>

                {/*row 2*/}
                <Grid container alignItems={"center"}>
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
                        <Typography variant="lionerLabel" component="span">
                            Username
                        </Typography>
                        <TextField
                            fullWidth
                            {...register("userName")}
                            inputProps={{maxLength: 50}}
                            id='userName'
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
                        <Typography variant="lionerLabel" component="span">
                            Full Name
                        </Typography>
                        <TextField
                            fullWidth
                            {...register("fullName")}
                            inputProps={{maxLength: 90}}
                            id="fullName"
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
                        <Typography variant="lionerLabel" component="span">
                            User Group
                        </Typography>
                        <Autocomplete
                            disablePortal
                            id="user-group-combo"
                            size="small"
                            value={userGroup === null? null : userGroup}
                            options={USER_GROUP_COMBO}//{userGroupList}
                            onChange={(event, newValue) => {
                                setUserGroup(newValue);
                            }}
                            renderInput={(params) => <TextField {...params}/>}
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
                        <Typography variant="lionerLabel" component="span">
                            Email
                        </Typography>
                        <TextField
                            fullWidth
                            {...register("email")}
                            inputProps={{maxLength: 120}}
                            id="email"
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5 }}>
                        <Typography variant="lionerLabel" component="span">
                            Phone
                        </Typography>
                        <TextField
                            fullWidth
                            {...register("phone")}
                            inputProps={{maxLength: 30}}
                            id="phone"
                            autoComplete="off"
                        />
                    </Grid>

                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{mt:2.5,ml:3, mr:3 }}>
                        <Typography variant="lionerLabel" component="span">
                            Show Locked User Only
                        </Typography>
                        <Checkbox
                            checked={locked}
                            onChange={(event) => setLocked(event.target.checked)}
                            name="checked"
                            color="primary"
                            size="medium"
                        />
                    </Grid> */}

                </Grid>


                {/*last row*/}

                <Grid container maxWidth justifyContent="space-between" sx={{mt:1.5,mb:2}}>
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                        <Grid item>
                            <Grid container>
                                <Grid item sx={{ml:3, mr:1.5, }}>
                                    <Button
                                        variant="contained"
                                        type="submit"
                                        color="save">
                                        Search
                                    </Button>
                                </Grid>

                                <Grid item sx={{ml:1.5, mr:3, mb:0.5 }}>
                                    <Button
                                        variant="contained"
                                        onClick={resetForm}
                                        color="cancel">
                                        Clear
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item sx={{ml:3, mr:3, mb:0.5 }}>
                            <Button
                                variant="contained"
                                onClick={createNewUser}
                                color="create">
                                New User
                            </Button>
                        </Grid>


                    </ThemeProvider>

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

export default UserSearchForm;
