import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useEvent } from './chunks/d4058887.js';
import { b as useState } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import { m as mockStyle } from './chunks/b7110801.js';
import './kun-emoji-picker.js';

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

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

  const changeText = textContent => {
    setText(textContent);
  };

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

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

  const onPost = () => {
    onSubmit({
      text
    });
  };

  return h("host", null, h("style", null, mockStyle), h("div", {
    className: "w-full flex flex-col border-gray-400"
  }, h("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"
  }), h("div", {
    className: "flex justify-between mt-3 flex items-center pr-3"
  }, h("div", null, h("kun-emoji-picker", {
    onSelectEvent: onSelect
  })), h("div", null, h("span", {
    className: "text-gray-800-600 mr-5 cursor-pointer",
    onclick: onClickCancel
  }, "\u53D6\u6D88"), h("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"
  }, "\u63D0\u4EA4")))));
};

KunInputComment.props = {};
var kunInputComment = getComponentOrDefine("kun-input-comment", KunInputComment);

export default kunInputComment;
//# sourceMappingURL=kun-input-comment.js.map
