import {
  h, Component, useState, useEvent,
} from "atomico";
import style from "./kun-search-input.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunSearchInput = () => {
  const [value, setValue] = useState("");

  const mySubmitEvent = useEvent("MySubmit", {
    bubbles: true,
    composed: true,
  });
  const changeSetValue = (event: Event): void => {
    const a = event.target as HTMLInputElement;
    setValue(a.value);
  };
  const onEnter = (event: KeyboardEvent): void => {
    if (event.code === "Enter") {
      const a = event.target as HTMLInputElement;
      mySubmitEvent(a.value);
      event.preventDefault();
      event.stopPropagation();
    }
  };

  return (
    <host>
      <style>{style}</style>
      <div className="w-full">
        <form className="w-full">
          <div className="flex items-center border-b border-b-2 border-orange-500 py-2">
            <input
              className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
              value={value}
              type="text"
              onkeydown={onEnter}
              placeholder="搜索一下"
              onchange={changeSetValue}
              aria-label=""
            />

            <button
              className="flex-shrink-0 bg-orange-400 hover:bg-orange-500 border-none hover:border-orange-500 text-sm border-4 text-white py-1 px-2 rounded kun-search-input-button"
              onclick={() => mySubmitEvent(value)}
              type="button"
            >
              马上搜索
            </button>
          </div>
        </form>
      </div>
    </host>
  );
};

KunSearchInput.props = {
  message: {
    type: String,
    value: "kun-search-input",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

export default getComponentOrDefine("kun-search-input", KunSearchInput);
