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

const TagSearchForm = ({applySearch}) => {

    const { reset, register, handleSubmit } = useForm()

    const onSubmit = (data) => {
        applySearch(data);
    };

    function resetForm(){
        reset();
    }

    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}}>
                        <InputLabel>Tag Name</InputLabel>
                        <TextField
                            fullWidth
                            {...register("name")}
                            inputProps={{maxLength: 100}}
                            id='tagName'
                            autoComplete="off"
                        />
                    </Grid>

                </Grid>

                {/*last row*/}
                <Grid container maxWidth justifyContent="flex-start" sx={{mt:2, mb:2}}>
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                        <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}}>
                            <Button
                                variant="contained"
                                onClick={resetForm}
                                color="cancel">
                                Clear
                            </Button>
                        </Grid>
                    </ThemeProvider>

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

export default TagSearchForm;
