import { useEvent, useRef, useState, useEffect, h, useProp } from 'atomico';
import { g as getComponentOrDefine } from './7a0ce1bf.js';
import { Option } from 'funfix';
import '../kun-image-or-default.js';
import dayjs from 'dayjs';
import { getKunImageUrl } from '../kun-chat-message.js';
import { m as mockStyle } from './b7110801.js';
import { u as useHoverHook } from './3605c1c7.js';
import { requestCreateComment } from '@caedman/seek-api/build/api/create-comment';
import { e as execWithSixLoad } from './c9cc5b80.js';
import toastr from 'toastr';

var style = ".picker {\n  margin-left: -20px;\n}\n\n.bubble {\n  background-color: #eee;\n  border: 2px solid #767373;\n  border-radius: 5px;\n  color: #333;\n  font: 16px/24px sans-serif;\n  padding: 12px 24px;\n  position: relative;\n}\n\n.bubble:after,\n.bubble:before {\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 20px solid #eee;\n  top: -20px;\n  content: '';\n  left: 20%;\n  margin-left: -20px;\n  position: absolute;\n}\n\n.bubble:before {\n  border-left: 23px solid transparent;\n  border-right: 23px solid transparent;\n  border-bottom: 23px solid;\n  border-bottom-color: inherit;\n  top: -23px;\n  margin-left: -23px;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-emoji-picker/kun-emoji-picker.tsx";
const array = [
  "😀",
  "😬",
  "😁",
  "😂",
  "🤣",
  "😃",
];

const KunEmojiPicker = () => {
  const onEvent = useEvent("SelectEvent", { bubbles: true, composed: true });
  const buttonRef = useRef();
  const [loaded, setLoaded] = useState(false);
  const b = useRef();

  useEffect(() => {
    // console.log('b.cu', b.current)
    // buttonRef.current.parent = b.current;
    console.log("b.cu", b.current);
    if (b.current != null) {
      setLoaded(true);
    }
  }, [b.current]);

  const onClick = (item) => {
    const a = (item.target );
    const regex = new RegExp(/<% emojiSequence %>|\p{Emoji_Presentation}|\p{Emoji}\uFE0F?|\p{Emoji_Modifier_Base}/gu);
    const r = a.innerHTML.match(regex)[0];
    if (r !== "6") {
      onEvent({ data: r });
    }
    // TODO emit erray
  };

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}, style)
      , h('div', { className: "relative", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}
        , h('rb-popover', { position: "bottom", 'icon-kind': "smile", kind: "neutral", 'icon-size': 1.2, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 51}}
          , h('div', { class: "w-64 flex flex-wrap justify-center pt-2"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}}
            , 
                array.map((item, index) => (
                  h('div', {
                    key: String(index),
                    onclick: (e) => onClick(e),
                    className: "cursor-pointer pr-2 mb-4 border-solid mx-5 border-1 border-gray-200 text-2xl"
                   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}
                  
                    , h('span', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 61}}, item)
                  )
                ))
              
          )
        )
      )
    )
  );
};

getComponentOrDefine("kun-emoji-picker", KunEmojiPicker);

const _jsxFileName$1 = "/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$1, lineNumber: 39}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName$1, lineNumber: 40}}, mockStyle)
      , h('div', { className: "w-full flex flex-col border-gray-400"   , __self: undefined, __source: {fileName: _jsxFileName$1, 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$1, lineNumber: 42}}
        )
        , h('div', { className: "flex justify-between mt-3 flex items-center pr-3"     , __self: undefined, __source: {fileName: _jsxFileName$1, lineNumber: 50}}
          , h('div', {__self: undefined, __source: {fileName: _jsxFileName$1, lineNumber: 51}}
            , h('kun-emoji-picker', { onSelectEvent: onSelect, __self: undefined, __source: {fileName: _jsxFileName$1, lineNumber: 52}} )
          )
          , h('div', {__self: undefined, __source: {fileName: _jsxFileName$1, lineNumber: 54}}
            , h('span', { className: "text-gray-800-600 mr-5 cursor-pointer"  , onclick: onClickCancel, __self: undefined, __source: {fileName: _jsxFileName$1, 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$1, lineNumber: 56}}
            , "提交"

            )
          )
        )
      )
    )
  );
};

KunInputComment.props = {
};

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

var style$1 = ":host {\n}\n\n.fixed-width {\n  width: 100px !important;\n}\n\n.text-color-username {\n  color: #008cd2;\n}\n";

const toastrMsg = (string) => {
  toastr.info(Option.of(string).getOrElse("操作成功"));
};

const formatDate = (date) => dayjs(date).format("YYYY-MM-DD");

const _jsxFileName$2 = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-child-comment-item-comp/kun-child-comment-item-comp.tsx";
const KunChildCommentItemComp = () => {
  const [itemProps, setItemProps] = useProp("kunItem");
  const [firstCommentId] = useProp("firstCommentId");
  const [seriesId] = useProp("seriesId");

  const [hoverRef, isHovered] = useHoverHook();

  const toogleCurrentCommentEvent = useEvent("MyChange", {
    composed: true,
    bubbles: true,
  });

  const item = Option.of(itemProps).getOrElse({
    content: "ok",
    createAt: 1,
    parentUserName: "ddd",
    commentUserName: "caedman",
  } );

  const [showResponse, setShowReponse] = useState(false);

  const onHandleChildComment = async (event) => {
    const data = {
      postId: item.postId,
      parentCommentId: item.commentId,
      firstCommentId: item.parentCommentId,
      seriesId,
      content: event.detail.text,
    } ;

    await execWithSixLoad(async () => {
      await requestCreateComment(data);
      toastrMsg("评论成功");
    });
  };

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 55}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 56}}, style$1)
      , h('div', { class: "flex flex-row w-full flex-1"   , ref: hoverRef, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 57}}
        , h('div', { class: "flex-none flex w-16"  , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 58}}
          , h('kun-image-or-default', { url: getKunImageUrl(item.commentUserAvatarOpt), width: 56, height: 56, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 59}} )
        )

        , h('div', { class: "flex w-full flex-col flex-auto pt-4"    , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 62}}

          , h('div', { class: "flex flex-row w-full justify-between"   , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 64}}
            , h('div', { class: "flex justify-start w-full"  , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 65}}
              , h('span', { class: "text-color-username mr-2" , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 66}}, item.commentUserName), "回复"

              , h('span', { class: "text-color-username mr-2" , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 68}}, item.parentUserName), ":"

              , h('span', {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 70}}, item.content)
            )

            , h('span', { class: "w-32 flex justify-end"  , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 73}}
              , 
                formatDate(item.createAt)
              
            )
          )

          , h('div', { class: "w-full h-5 justify-end flex py-8"    , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 80}}
            , h('span', {
              class: "cursor-pointer",
              onclick: () => {
                setShowReponse(true);
                toogleCurrentCommentEvent(item.commentId);
              }, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 81}}
            , "回复"

            )
          )

          , h('div', { class: "flex flex-col flex-auto w-full justify-between"    , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 92}}
            , 
                showResponse && (
                h('div', { class: "flex w-full" , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 95}}
                  , h('kun-input-comment', {
                    onMySubmit: onHandleChildComment,
                    onMyCancel: () => setShowReponse(false),
                    className: "flex w-1 w-full flex-auto box-border w-1 fixed-width"      , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 96}}
                  )
                )
                )
              
          )

        )

      )
    )
  );
};

KunChildCommentItemComp.props = {
  firstCommentId: {
    type: String,
  },
  seriesId: {
    type: String,
  },
  kunItem: {
    type: Object,
  },
};

var kunChildCommentItemComp = getComponentOrDefine("kun-child-comment-item-comp", KunChildCommentItemComp);

export { formatDate as f, kunChildCommentItemComp as k };
