import { useProp, useState, useEvent, useEffect, h } from 'atomico';
import './aync-hook.js';
import 'toastr';
import { Option } from 'funfix';
import { t as toastrMessage } from './chunks/496a9efa.js';
import './use-toaster-hook.js';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import './kun-icon.js';
import './chunks/a234fa33.js';
import './kun-image-or-default.js';
import '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';
import './kun-image.js';
import 'dayjs';
import { getKunImageUrl } from './kun-chat-message.js';
import './chunks/b7110801.js';
import './kun-button-puer.js';
import './kun-emoji-picker.js';
import './kun-input-comment.js';
import { requestCreateComment } from '@caedman/seek-api/build/api/create-comment';
import { f as formatDate } from './chunks/c3030237.js';
import { e as execWithSixLoad } from './chunks/19492529.js';
import produce from 'immer';
import { reqLikeComment } from '@caedman/seek-api/build/api/req-like-comment';

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-item-comment/kun-item-comment.tsx"; function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
const style = `
  .kun-item-comment-bg {
    background: #f9f9f9;
  }
  
  .comment-max-width {
    max-width: calc(100% - 60px);
  }
`;

const KunItemComment = () => {
  const [itemProps, setItemProps] = useProp("kunItem");

  const item = Option.of(itemProps).getOrElse({
    postId: "132",
    commentUserName: "蓝小球",
    createAt: "2020-06-07",
    commentId: "xxx",
    niceLookCount: 10,
    content: "加油啊，很不错",
    childComments: {
      records: [
        {
          createAt: "2020-06-07",
          content: "111",
          parentUserName: "ddd",
          commentUserName: "蓝小球",
        },
        {
          createAt: "2020-06-07",
          parentUserName: "ddd",
          content: "111",
          commentUserName: "蓝小球",
        },
        {
          parentUserName: "ddd",
          createAt: "2020-06-07",
          content: "111",
          commentUserName: "蓝小球",
        },
      ],
    },
  } );

  const [seriesIdProp] = useProp("seriesId");
  const [currentCommentId] = useProp("currentCommentId");

  const [like, setLike] = useState(false);

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

  const myRefresh = useEvent("MyRefresh", {
    composed: true,
    bubbles: true,
  });

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

  useEffect(() => {
    if (item == null) {
      return;
    }
    if (currentCommentId === item.commentId) {
      setShowResponse(true);
    } else {
      setShowResponse(false);
    }
  }, [currentCommentId]);

  const toogleClick = () => {
    if (_optionalChain([item, 'optionalAccess', _ => _.commentId]) == null) {
      return;
    }
    setShowResponse(!showResponse);
    toogleCurrentCommentEvent(item.commentId);
  };

  const onCancel = () => {
    setShowResponse(false);
  };

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

    await execWithSixLoad(async () => {
      await requestCreateComment(data);
      myRefresh({});
      setShowResponse(false);
      toastrMessage("评论成功");
    });
  };

  const toogle = async (event) => {
    await execWithSixLoad(async () => {
      await reqLikeComment({
        feedId: String(item.postId),
        commentId: String(item.commentId),
        isLike: true,
      } );

      const newData = produce(item, (draft) => {
        draft.niceLookCount = like ? item.niceLookCount - 1 : item.niceLookCount + 1;
      });
      setItemProps(newData);
      setLike(!like);
    });
    event.preventDefault();
    event.stopPropagation();
  };
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 160}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 161}}, style)

      , h('div', { className: "flex justify-start w-full kun-item-comment-bg py-4 px-4"     , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 163}}
        , h('div', { class: "flex-none flex w-16"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 164}}
          , h('kun-image-or-default', { url: getKunImageUrl(item.commentUserAvatarOpt), width: 56, height: 56, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 165}} )
        )

        , h('div', { class: "flex flex-col px-2 flex-auto relative w-full comment-max-width"      , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 168}}
          , h('div', { class: "flex flex-col w-full"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 169}}
            , h('div', { class: "flex flex-row justify-between w-full"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 170}}
              , h('span', { class: "flex items-center" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 171}}
                , h('span', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 172}}, _nullishCoalesce(item.commentUserName, () => ( "用户")))
              )

              , h('span', { className: "ml-2", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 175}}
                , 
                  formatDate(item.createAt)
              
              )
            )

            , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 182}}
              , h('div', { class: "flex flex-row" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 183}}
                , h('div', { class: "flex justify-start items-center"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 184}}
                  , 
                                !like && (
                                h('kun-icon', { iconType: "to-dian-zan", iconWidth: 18, iconHeight: 18, onclick: toogle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 187}} )
                                )
                            
                  , 
                                like && (
                                h('kun-icon', { iconType: "dianzan", iconWidth: 18, iconHeight: 18, onclick: toogle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 192}} )
                                )
                            
                  /* TODO  add number */
                  , 
                                item.niceLookCount > 0 && (
                                h('span', { className: "ml-1", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 198}}, item.niceLookCount)
                                )
                            
                )
                , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 202}}
                  , h('span', { onclick: toogleClick, class: "cursor-pointer ml-2" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 203}}, "回复")
                )
              )

              , h('div', { class: "flex-auto flex flex-grow-0"  , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 207}}
                , 
                  showResponse && (
                  h('kun-input-comment', {
                    onMySubmit: onHandleChildComment,
                    onMyCancel: onCancel,
                    className: "w-full flex flex-auto box-border"   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 210}}
                  )
                  )
                
              )

              , h('div', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 219}}
                , 
                  item.childComments.records.map((child) => (
                    h('kun-child-comment-item-comp', { kunItem: child, seriesId: seriesIdProp, firstCommentId: item.parentCommentId, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 222}} )
                  ))
                
              )
            )
          )
        )
      )
    )
  );
};

KunItemComment.props = {
  isPractice: {
    type: Boolean,
  },
  currentCommentId: {
    type: String,
  },
  seriesId: {
    type: String,
  },
  kunItem: {
    type: Object,
    reflect: true,
  },
};

var kunItemComment = getComponentOrDefine("kun-item-comment", KunItemComment);

export default kunItemComment;
