import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from '@material-ui/core/IconButton';
import SearchIcon from '@material-ui/icons/Search';
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { useSelector, useDispatch } from "react-redux";
import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../../actions";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiOutlinedInput-root":{
      "& fieldset":{
        borderWidth: "0px"
      },
      '&.Mui-focused fieldset': {
        borderWidth: '2px',
      },
    },
    "& .MuiInputBase-root": {
      backgroundColor: "#202020",
      color: "#bbbbbb",
      borderRadius: "16px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
  },
}));

export default function SearchPanel() {
  let options = useSelector((store) => store.autocomplete);
  let searchQuery = useSelector((store) => store.searchQuery);
  const dispatch = useDispatch();
  const classes = useStyles();

  useEffect(() => {
    document.title = "Menui - Food Guide";
  });

  const keyDown = (event) => {
    if (event.keyCode === 13) {
      dispatch(fetchSearch(searchQuery));
    }
  };

  return (
    <div className="searchPanel">
      <Autocomplete
        options={options}
        style={{ width: 300 }}
        noOptionsText="Brak podpowiedzi"
        onChange={(event) => dispatch(setSearchQuery(event.target.textContent))}
        renderInput={(params) => (
          <TextField
            {...params}
            className={classes.root}
            label="Szukaj"
            variant="outlined"
            onKeyDown={keyDown}
            onChange={(event) => dispatch(setSearchQuery(event.target.value))}
            onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
          />
        )}
      />

      <div className="btnContainer">
        <IconButton color="primary" aria-label="search" onClick={() => dispatch(fetchSearch(searchQuery))}>
          <SearchIcon/>
        </IconButton>
      </div>
    </div>
  );
}