// material-ui
import {
    Button,
    CardContent,
    Grid, InputLabel, TextField,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {ThemeProvider} from "@emotion/react";
import Autocomplete from "@mui/material/Autocomplete";
import {MODULE_COMBO} from "../../utils/ComboConst";
import {useEffect, useState} from "react";
import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../themes/themeConst";

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

const AdvanceSearchForm = ({applySearch, selectedModule,
                           reset,register,handleSubmit}) => {

    const [locSelectedModule, setLocSelectedModule] = useState(null);
    const [errors, setErrors] = useState({});

    const onSubmit = (data) => {

        const formErrors = {};

        if (!data.keyword) {
            formErrors.keyword = 'Please input keywords.';
        }

        if (locSelectedModule == null){
            formErrors.module = 'Module is required.';
        }

        setErrors(formErrors);

        if (Object.keys(formErrors).length === 0) {
            applySearch(data,locSelectedModule);
        }
    };

    useEffect(() => {
        //console.log("from top bar");
        setLocSelectedModule(selectedModule);
    }, [selectedModule]);


    function resetForm(){
        setLocSelectedModule(null);
        reset();
    }

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

            <form onSubmit={handleSubmit(onSubmit)}>
                {/*row 1*/}
                <ThemeProvider theme={LIONER_FORM_THEME}>
                <CardContent>
                </CardContent>

                {/*row 2*/}
                <Grid container alignItems={"flex-start"}>
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                        <InputLabel>Keyword</InputLabel>
                        <TextField
                            autoComplete='off'
                            fullWidth
                            {...register("keyword")}
                            inputProps={{maxLength: 255}}
                            id='keyword'
                            error={!!errors.keyword}
                            helperText={errors.keyword}
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                        <InputLabel>Module</InputLabel>
                        <Autocomplete
                            disablePortal
                            id="module-combo"
                            size="small"
                            value={locSelectedModule === null? null : locSelectedModule}
                            options={MODULE_COMBO}
                            onChange={(event, newValue) => {
                                setLocSelectedModule(newValue);
                            }}
                            renderInput={(params) => <TextField
                                {...params}
                                error={!!errors.module}
                                helperText={errors.module}
                            />}
                        />
                    </Grid>
                </Grid>

                {/*last row*/}
                <Grid container maxWidth justifyContent="space-between" >
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                        <Grid item>
                            <Grid container>
                                <Grid item sx={{ml:3, mr:1.5, mb:2, mt:2}}>
                                    <Button
                                        size="medium"
                                        variant="contained"
                                        onClick={resetForm}
                                        color="cancel"
                                    >
                                        Clear
                                    </Button>
                                </Grid>

                                <Grid item sx={{ml:1.5, mr:1.5, mb:2, mt:2}}>
                                    <Button
                                        size="medium"
                                        variant="contained"
                                        type="submit"
                                        color="save"
                                    >
                                        Search
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>

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

export default AdvanceSearchForm;
