import { useEffect, useRef } from "react";
import Paper from "@mui/material/Paper";
import InputBase from "@mui/material/InputBase";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import DirectionsIcon from "@mui/icons-material/Directions";
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";

export default function CatalogSearch(props) {
  const { onChange, onClear } = props;

  const searchRef = useRef(null);

  const handleClear = () => {
    searchRef.current.children[0].value = null;
    searchRef.current.children[0].focus();
    onClear();
  };

  return (
    <Paper component="form" sx={{ display: "flex", alignItems: "center" }}>
      <InputBase
        ref={searchRef}
        sx={{ ml: 1, flex: 1 }}
        placeholder="Search Catalog"
        inputProps={{ "aria-label": `search catalog` }}
        onChange={onChange}
        fullWidth
      />
      <Divider sx={{ height: 26, m: 0.5 }} orientation="vertical" />
      <IconButton
        sx={{ p: "10px", mr: 0.5 }}
        aria-label="clear"
        onClick={handleClear}
      >
        <ClearOutlinedIcon />
      </IconButton>
    </Paper>
  );
}