import { useState, useEvent, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import { m as mockStyle } from './chunks/b7110801.js';
import './kun-emoji-picker.js';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-input-comment/kun-input-comment.tsx";
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', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 39}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}}, mockStyle)
      , h('div', { className: "w-full flex flex-col border-gray-400"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}
        , 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", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 42}}
        )
        , h('div', { className: "flex justify-between mt-3 flex items-center pr-3"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}
          , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 51}}
            , h('kun-emoji-picker', { onSelectEvent: onSelect, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}} )
          )
          , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 54}}
            , h('span', { className: "text-gray-800-600 mr-5 cursor-pointer"  , onclick: onClickCancel, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}, "取消")
            , 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", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 56}}
            , "提交"

            )
          )
        )
      )
    )
  );
};

KunInputComment.props = {
};

var kunInputComment = getComponentOrDefine("kun-input-comment", KunInputComment);

export default kunInputComment;
