import {
  h, c, Component, useProp, useState, useEvent,
} from "atomico";
import { KunCommentWithDate } from "@caedman/seek-api/build/api/get-comments-by-post";
import "../kun-image-or-default/kun-image-or-default";
import { Option } from "funfix";
import "../kun-input-comment/kun-input-comment";
import { KunCustomEvent } from "@caedman/spring/build/kun-custom-event";
import { ReqCreateComment, requestCreateComment } from "@caedman/seek-api/build/api/create-comment";
import style from "./kun-child-comment-item-comp.scss";
import { execWithSixLoad } from "../../common/exec-confirm";
import { useHoverHook } from "../../hooks/aync-hook/aync-hook";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { toastrMsg } from "../../hooks/use-toaster-hook/use-toaster-hook";
import { formatDate } from "../kun-item-comment/format-date";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";

const KunChildCommentItemComp: Component = () => {
  const [itemProps, setItemProps] = useProp<KunCommentWithDate>("kunItem");
  const [firstCommentId] = useProp<string>("firstCommentId");
  const [seriesId] = useProp<KunCommentWithDate>("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",
  } as KunCommentWithDate);

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

  const onHandleChildComment = async (event: KunCustomEvent<{ text: string }>): Promise<void> => {
    const data: ReqCreateComment = {
      postId: item.postId,
      parentCommentId: item.commentId,
      firstCommentId: item.parentCommentId,
      seriesId,
      content: event.detail.text,
    } as ReqCreateComment;

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

  return (
    <host>
      <style>{style}</style>
      <div class="flex flex-row w-full flex-1" ref={hoverRef}>
        <div class="flex-none flex w-16">
          <kun-image-or-default url={getKunImageUrl(item.commentUserAvatarOpt)} width={56} height={56} />
        </div>

        <div class="flex w-full flex-col flex-auto pt-4">

          <div class="flex flex-row w-full justify-between">
            <div class="flex justify-start w-full">
              <span class="text-color-username mr-2">{item.commentUserName}</span>
              回复
              <span class="text-color-username mr-2">{item.parentUserName}</span>
              :
              <span>{item.content}</span>
            </div>

            <span class="w-32 flex justify-end">
              {
                formatDate(item.createAt)
              }
            </span>
          </div>

          <div class="w-full h-5 justify-end flex py-8">
            <span
              class="cursor-pointer"
              onclick={() => {
                setShowReponse(true);
                toogleCurrentCommentEvent(item.commentId);
              }}
            >
              回复
            </span>
          </div>

          <div class="flex flex-col flex-auto w-full justify-between">
            {
                showResponse && (
                <div class="flex w-full">
                  <kun-input-comment
                    onMySubmit={onHandleChildComment}
                    onMyCancel={() => setShowReponse(false)}
                    className="flex w-1 w-full flex-auto box-border w-1 fixed-width"
                  />
                </div>
                )
              }
          </div>

        </div>

      </div>
    </host>
  );
};

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

export default getComponentOrDefine("kun-child-comment-item-comp", KunChildCommentItemComp);
