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

var style = ":host {\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-edit-comment/kun-edit-comment.tsx";
const KunEditComment = () => {
  const [text, setText] = useState("ok");

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

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

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

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

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 32}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}, style)
      , h('div', { className: "w-full", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}
        , h('div', { className: "w-full flex flex-col border-gray-400"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}}
          , 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: 36}}
          )
          , h('div', { className: "flex justify-between mt-3 flex items-center pr-3"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 44}}
            , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 45}}
              , h('kun-emoji-picker', { onSelectEvent: onSelect, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 46}} )
            )
            , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
              , h('span', { className: "text-blue-600 mr-5 cursor-pointer"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}, "取消")
              , 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: 50}}
              , "提交"

              )
            )
          )
        )
      )
    )
  );
};

KunEditComment.props = {
  message: {
    type: String,
    value: "kun-edit-comment",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunEditComment = getComponentOrDefine("kun-edit-comment", KunEditComment);

export default kunEditComment;
