import { useProp, useEvent, useState, h } from 'atomico';
import { useHoverHook } from '../aync-hook.js';
import { Option } from 'funfix';
import { toastrMsg } from '../use-toaster-hook.js';
import { g as getComponentOrDefine } from './65ef80fe.js';
import '../kun-image-or-default.js';
import dayjs from 'dayjs';
import { getKunImageUrl } from '../kun-chat-message.js';
import '../kun-input-comment.js';
import { requestCreateComment } from '@caedman/seek-api/build/api/create-comment';
import { e as execWithSixLoad } from './19492529.js';

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

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

const _jsxFileName = "/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, lineNumber: 55}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 56}}, style)
      , h('div', { class: "flex flex-row w-full flex-1"   , ref: hoverRef, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 57}}
        , h('div', { class: "flex-none flex w-16"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 58}}
          , h('kun-image-or-default', { url: getKunImageUrl(item.commentUserAvatarOpt), width: 56, height: 56, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 59}} )
        )

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

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

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

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

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

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

            )
          )

          , h('div', { class: "flex flex-col flex-auto w-full justify-between"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 92}}
            , 
                showResponse && (
                h('div', { class: "flex w-full" , __self: undefined, __source: {fileName: _jsxFileName, 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, 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 };
