// material-ui
import {
    Box, Button,
    FormControl,
    TextField
} from '@mui/material';

// assets
import {MODULE_COMBO} from "../../../../utils/ComboConst";
import Autocomplete from "@mui/material/Autocomplete";
import * as React from "react";
import {useContext, useEffect, useState} from "react";
import {LIONER_BUTTON_THEME } from "../../../../themes/colorConst";
import {ThemeProvider} from "@emotion/react";
import {useForm} from "react-hook-form";
import {useNavigate} from "react-router";
import 'assets/style/rankStyle.css';
import {LIONER_FORM_THEME} from "../../../../themes/themeConst";
import {useLocation} from "react-router-dom";
import {Grid} from "@mui/material";
import LocaleContext from "../../../../components/I18nProvider";

// ==============================|| HEADER CONTENT - SEARCH ||============================== //

const Search = () => {
    const [selectedModule, setSelectedModule] = useState(null);
    const { register, handleSubmit, setValue} = useForm()
    const [errors, setErrors] = useState({});
    const navigate = useNavigate();
    const location = useLocation();
    const [isAdvanceSearch, setIsAdvanceSearch] = useState(false);
    const { isAdvanceDisplay } = useContext(LocaleContext);


    useEffect(()=>{
        const path = location.pathname.split('/')[1];
        if(path === "advance"){
            setIsAdvanceSearch(true);
        }
        else{
            setIsAdvanceSearch(false);
        }
    },[location]);


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

        if (!data.keyword) {
            formErrors.keyword = 'Keyword cannot be null';
        }

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

        setErrors(formErrors);
        if (Object.keys(formErrors).length === 0) {
            navigate(`/advance/${selectedModule.label}/${data.keyword}`);
            setSelectedModule(null);
            setValue("keyword",null);
        }
    };

    return(
        <Box sx={{width: '100%', ml: {xs: 0, md: 1}}}>

            {
                !isAdvanceDisplay?
                <Grid item/>:
                <ThemeProvider theme={LIONER_FORM_THEME}>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <FormControl sx={{ mt:{xs:1.5, lg:0.02}, ml:3, width: {xs: '40vw', md: 250}}}>
                            <Box
                                sx={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                }}
                            >
                                <TextField
                                    size="small"
                                    fullWidth
                                    {...register("keyword")}
                                    inputProps={{maxLength: 255}}
                                    id='keyword'
                                    label="Advanced Search"
                                    error={!!errors.keyword}
                                    helperText={errors.keyword}
                                    disabled={isAdvanceSearch}
                                    autoComplete="off"
                                />
                            </Box>

                        </FormControl>
                        <FormControl sx={{ mt:{xs:1.5, lg:0.02}, ml:3, width: {xs: '30vw', md: 175}}}>
                            <Autocomplete
                                id="module-combo"
                                size="small"
                                value={selectedModule === null ? null : selectedModule}
                                options={MODULE_COMBO}
                                disabled={isAdvanceSearch}
                                onChange={(event, newValue) => {
                                    setSelectedModule(newValue);
                                }}
                                renderInput={(params) =>
                                    <TextField
                                        {...params}
                                        label="Module"
                                        error={!!errors.module}
                                        helperText={errors.module}
                                        disabled={isAdvanceSearch}
                                    />
                                }
                            />
                        </FormControl>
                        <FormControl xs={4} s={4} md={2.5} sx={{ mt:{xs:1.5, lg:0.02}, ml:3, mr:3,width: {xs: '25vw', md: 100}}}>
                            <ThemeProvider theme={LIONER_BUTTON_THEME}>
                                <Button
                                    size="medium"
                                    variant="contained"
                                    type="submit"
                                    color="save"
                                    style={{ zIndex: '10' }}
                                    disabled={isAdvanceSearch}
                                >
                                    Search
                                </Button>
                            </ThemeProvider>
                        </FormControl>
                    </form>
                </ThemeProvider>
            }


        </Box>
    );
};

export default Search;
