import React, { useState } from "react";
import axios from "axios";
import Results from "./searchedResults";
import Gallery from "./galleryHolder";
import "./reactStyling.css";

function HtmlMainFrame() {
  let [searchTerm, setSerchTerm] = useState("");
  //* defintions Hook below/
  let [searchResult, collectedSearchArrey] = useState("");
  //* gallery Hook below/
  let [theGallery, setTheGallery] = useState("");

  function defineSearch(response) {
    collectedSearchArrey(response);
  }

  function picDisplay(response) {
    setTheGallery(response);
  }

  function wantedTerm(event) {
    event.preventDefault();
    setSerchTerm(event.target.value);
  }

  function display(event) {
    event.preventDefault();
    if (searchTerm) {
      //* for API defintions /
      let UrlApi = `https://api.dictionaryapi.dev/api/v2/entries/en/${searchTerm}`;
      axios.get(UrlApi).then(defineSearch);
      //* for API gallery /
      let picUrlApi = `https://api.pexels.com/v1/search?query=${searchTerm}&per_page=9`;
      const headers = {
        "Content-Type": "application/json",
        Authorization:
          "PkCuOi7pFR4744XoQAKQTmuCGPcGourRA4CqKkua5An7lrxWXnNhj11Z",
      };
      axios.get(picUrlApi, { headers }).then(picDisplay);
    } else {
      alert("Please enter a word in the search bar");
    }
  }

  return (
    <div className="whole-html-body">
      <header className="App-header">
        <h1 className="header-h1">Dictionary</h1>
        {/*  form section */}
        <form onSubmit={display}>
          <input
            className="header-input"
            type="text"
            placeholder="Enter Word"
            onChange={wantedTerm}></input>
          <input type="submit" value="Search"></input>
        </form>
        {/* form section */}
        <h2 className="header-h2">example: "Dog" "house" "bargin" "time"</h2>
      </header>
      <main>
        <section className="main-results-display">
          <Results Term={searchResult} />
        </section>
        <section className="gallery-div">
          <Gallery Term={theGallery} />
        </section>
      </main>
    </div>
  );
}

export default HtmlMainFrame;