import "font-awesome/css/font-awesome.min.css";
import "../stylesheets/Suche.css";
import PlantsOverview from "../components/PlantsOverview";
import { useState, useEffect } from "react";
import FilterPage from "../components/FilterPage";
import { Plant } from "../utils/schemas";
import { IBackendConnector } from "../utils/IBackendConnector";
import useGrowbrosFetcher from "../utils/useGrowbrosFetcher";

function Suche() {
  const [randomPlants, setRandomPlants] = useState<Plant[]>([]);
  const [error, setError] = useState({});
  const randomPlantsCount: number = 100;

  const bc: IBackendConnector = useGrowbrosFetcher();

  useEffect(() => {
    (async () => {
      const result = await bc.getRandomPlants(randomPlantsCount);
      if (result.err) {
        setError(result.err);
      } else {
        setRandomPlants(result.value!);
      }
    })();
  }, []);

  //TODO error handling
  return (
    <>
      <SearchBar />
      <div>
        <PlantsOverview plants={randomPlants} />
      </div>
    </>
  );
}

function SearchBar() {
  const [isComponentVisible, setComponentVisible] = useState(false);

  const loadComponent = () => {
    setComponentVisible(!isComponentVisible);
  };

  return (
    <>
      <div className="searchBar">
        <h2>Suche nach einer Pflanze</h2>
        <p>
          und füge diese dann zu deinem Garten oder zu deiner Wunschliste hinzu
        </p>
        <div className="searchFilter">
          <input type="text" placeholder="Pflanze suchen..." />
          <button>
            <i className="fa fa-search"></i>
          </button>
          <button onClick={loadComponent} className="filter">
            <i className="fa fa-filter" />
          </button>
        </div>
        {isComponentVisible && <FilterPage />}
      </div>
    </>
  );
}

export default Suche;