import {
  h, useState, useEffect, useHost, Component,
} from "atomico";
import style from "./kun-search-page.css";
import "../kun-search-input/kun-search-input";
import "../kun-icon-close/kun-icon-close";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunSearchPage = ({ content }): Component => {
  const [show, setShow] = useState(false);

  const setShowEvent = (event: KeyboardEvent): void => {
    if (event.key === "Escape") {
      setShow(false);
      event.preventDefault();
    }
  };
  const host = useHost();
  useEffect(() => {
    host.current.addEventListener("keydown", setShowEvent);
    return () => {
      host.current.removeEventListener("keydown", setShowEvent);
    };
  });
  return (
    <host>
      <style>{style}</style>
      <div onclick={() => setShow(true)} role="presentation">
        <button type="button">{content}</button>
      </div>
      {
        show && (
        <div className="search w-full flex flex-col relative">
          <kun-icon-close onclick={() => setShow(false)} className=" right-0 absolute p-4" />
          <div className="mt-20  w-full flex justify-center ">
            <kun-search-input />
          </div>
        </div>
        )
      }
    </host>
  );
};

KunSearchPage.props = {
  content: {
    type: String,
    value: "Search",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-search-page", KunSearchPage);
