import { useEffect, useContext } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import CatalogBox from "./components/CatalogBox.jsx";

import TextField from "@mui/material/TextField";

import CatalogSearch from "./components/CatalogSearch.jsx";

export default function Catalog() {
  const {
    state: jobState,
    dispatch: jobDispatch,
    jobUpdate,
    jobCreate,
  } = useContext(JobContext);

  const { state: store, updateStore } = useContext(StoreContext);

  const handleSearchChange = (e) =>
    updateStore({ catalogSearch: e.target.value });

  const handleSearchClear = () => updateStore({ catalogSearch: "" });

  useEffect(() => {
    return function unmount() {
      handleSearchClear();
    };
  }, []);

  return (
    <div className="catalog">
      <CatalogSearch
        onChange={handleSearchChange}
        onClear={handleSearchClear}
        clearOnUnmount
      />
      <h6>{store.catalogSearch}</h6>
      {store.catalog.map((v, i) => (
        <CatalogBox key={i} catalogTest={v} />
      ))}
    </div>
  );
}