import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import ButtonSecondary from "./ButtonSecondary";
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": {
        borderColor: "#01c3a9",
      },
    },
    "& .MuiInputBase-root": {
      color: "#01c3a9",
    },
    "& .MuiInputLabel-root": {
      color: "#01c3a9",
    },
  },
}));

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="Miasto, Nazwa lokalu, ..."
            variant="outlined"
            onKeyDown={keyDown}
            onChange={(event) => dispatch(setSearchQuery(event.target.value))}
            onInput={(event) => dispatch(fetchAutocomplete(event.target.value))}
          />
        )}
      />

      <div className="btnContainer">
        <ButtonSecondary
          onClick={() => dispatch(fetchSearch(searchQuery))}
          text="Szukaj"
        />
      </div>
    </div>
  );
}