import {
  Component, h, useEvent, useState,
} from "atomico";
import "../kun-emoji-picker/kun-emoji-picker";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { mockStyle } from "../../common/mock-style";

const KunInputComment = () => {
  const [text, setText] = useState("ok");

  const onSelect = (event: CustomEvent): void => {
    setText(`${text}${event.detail.data}`);
  };

  const changeText = (textContent: string): void => {
    setText(textContent);
  };

  const onCancel = useEvent("MyCancel", {
    composed: true,
    bubbles: true,
  });

  const onSubmit = useEvent("MySubmit", {
    composed: true,
    bubbles: true,
  });

  const onClickCancel = (): void => {
    onCancel({});
  };

  const onPost = (): void => {
    onSubmit({
      text,
    });
  };
  return (
    <host>
      <style>{mockStyle}</style>
      <div className="w-full flex flex-col border-gray-400">
        <textarea
          rows="10"
          cols="100"
          onchange={(evt) => changeText(evt.target.value)}
          className="border-gray-400 border h-20 p-4"
          value={text}
          id="inline-full-name"
        />
        <div className="flex justify-between mt-3 flex items-center pr-3">
          <div>
            <kun-emoji-picker onSelectEvent={onSelect} />
          </div>
          <div>
            <span className="text-gray-800-600 mr-5 cursor-pointer" onclick={onClickCancel}>取消</span>
            <button
              onclick={() => onPost()}
              className="shadow bg-orange-400 hover:bg-orange-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
              type="button"
            >
              提交
            </button>
          </div>
        </div>
      </div>
    </host>
  );
};

KunInputComment.props = {
};

export default getComponentOrDefine("kun-input-comment", KunInputComment);
