// material-ui
import {
    Button,InputLabel,
    Grid, TextField,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";
import {useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import {ThemeProvider} from "@emotion/react";
import {MODULE_COMBO} from "../../utils/ComboConst";
import * as React from "react";
import {LIONER_BUTTON_THEME, LIONER_LONG_BUTTON_THEME} from "../../themes/colorConst";
import {useNavigate} from "react-router";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const TemplateSearchForm = ({applySearch}) => {

    const navigate = useNavigate()
    const [selectedModule, setSelectedModule] = useState(null);
    const { reset, register, handleSubmit } = useForm()

    const onSubmit = (data) => {
        const temp = {
            module: selectedModule === null ? "" : selectedModule.label,
            templateName: data.name
        };
        applySearch(temp);
    };

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

    function createNewTemplate(){
        navigate(`/template/maintain/-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:3}}>
                        <InputLabel>
                            Module
                        </InputLabel>
                        <Autocomplete
                            disablePortal
                            id="module-combo"
                            size="small"
                            value={selectedModule === null? null : selectedModule}
                            options={MODULE_COMBO}
                            onChange={(event, newValue) => {
                                setSelectedModule(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
                        <InputLabel>
                            Template Name
                        </InputLabel>
                        <TextField
                            fullWidth
                            {...register("name")}
                            inputProps={{maxLength: 255}}
                            id='templateName'
                            autoComplete="off"
                        />
                    </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:3}}>
                                    <Button
                                        variant="contained"
                                        type="submit"
                                        color="save">
                                        Search
                                    </Button>
                                </Grid>

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

                        </Grid>

                        <ThemeProvider theme={LIONER_LONG_BUTTON_THEME}>
                        <Grid item>
                            <Grid container>
                                <Grid item sx={{ml:3, mr:3, mb:3}}>
                                    <Button
                                        variant="contained"
                                        color="create"
                                        onClick={createNewTemplate}
                                        >
                                        New Template
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>
                        </ThemeProvider>
                    </ThemeProvider>
                </Grid>
            </form>
        </MainCard>
    );
};

export default TemplateSearchForm;
