import { useEffect, useContext } from "react";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
import CatalogBox from "./CatalogBox.jsx";
import CatalogSearch from "./CatalogSearch.jsx";
import { useCatalogTests } from "../../Queries.jsx";
import TextField from "@mui/material/TextField";

export default function Catalog() {
  const { state: store, updateStore } = useContext(StoreContext);
  const { isLoading, data: tests } = useCatalogTests();
  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>
      {isLoading
        ? null
        : tests.map((v, i) => <CatalogBox key={i} catalogTest={v} />)}
    </div>
  );
}