// 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 {useNavigate} from "react-router-dom";
import {LIONER_BUTTON_THEME, LIONER_LONG_BUTTON_THEME} from "../../themes/colorConst";
import {ThemeProvider} from "@emotion/react";
import {useState} from "react";
import Autocomplete from '@mui/material/Autocomplete';
import {BRANCH_COMBO} from "../../utils/ComboConst";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const DivisionSearchForm = ({applySearch}) => {
    const navigate = useNavigate();
    const { reset, register, handleSubmit } = useForm()
    const [selectedBranch, setSelectedBranch] = useState(null);

    const onSubmit = (data) => {
        const temp = {
            ...data,
            branch: selectedBranch === null ? "" : selectedBranch.label
        };
        applySearch(temp);
    };

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

    function createNewDivision(){
        navigate('/division/-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, }}>
                        <InputLabel >Division Name</InputLabel>
                        <TextField
                            fullWidth
                            {...register("name")}
                            inputProps={{maxLength: 255}}
                            id='name'
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, }}>
                        <InputLabel >Sub-Division Name</InputLabel>
                        <TextField
                            fullWidth
                            {...register("subDivisionName")}
                            inputProps={{maxLength: 255}}
                            id="subDivisionName"
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, }}>
                        <InputLabel >Branch </InputLabel>
                        <Autocomplete
                            disablePortal
                            id="branch-combo"
                            size="small"
                            value={selectedBranch === null? null : selectedBranch}
                            options={BRANCH_COMBO}
                            onChange={(event, newValue) => {
                                setSelectedBranch(newValue);
                            }}
                            renderInput={(params) => <TextField
                                {...params}
                                label=""
                            />}
                        />
                    </Grid>
                </Grid>


                {/*last row*/}
                <Grid container maxWidth justifyContent="space-between" sx={{mt:2,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:1.5, }}>
                                    <Button
                                        variant="contained"
                                        onClick={resetForm}
                                        color="cancel">
                                        Clear
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item sx={{ml:{xs:3, md:3, lg:1.5}, mr:3, }}>
                            <ThemeProvider theme={LIONER_LONG_BUTTON_THEME}>
                            <Button
                                variant="contained"
                                onClick={createNewDivision}
                                color="create">
                                New Division
                            </Button>
                            </ThemeProvider>
                        </Grid>

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

export default DivisionSearchForm;
