import {
  h, useProp, Component,
} from "atomico";
import { ChatMessageRecord } from "@caedman/seek-api/build/api/get-chat-history";
import "../kun-image-or-default/kun-image-or-default";
import { Option } from "funfix";
import style from "./kun-rich-msg.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";

const KunRichMsg = () => {
  const [msgProps] = useProp<ChatMessageRecord>("message");

  const msg = Option.of(msgProps).getOrElse({
    msgContent: "7/KzoMb8EeqCHJ3T8JKVww==.png",
    msgType: "IMAGE",
  } as unknown as ChatMessageRecord);

  return (
    <host>
      <style>{style}</style>
      <span>
        {
            msg.msgType === "TXT" && (
            <div class="break-all">
              {msg.msgContent}
            </div>
            )
        }
        {
              msg.msgType === "TEXT" && (
              <div class="break-all">
                {msg.msgContent}
              </div>
              )
       }
        {
              msg.msgType === "IMAGE" && (
              <sl-gallery prefix={msg.msgId}>
                <sl-gallery-image
                  src={getKunImageUrl(msg.msgContent)}
                  small={getKunImageUrl(msg.msgContent)}
                  title="图片"
                />
              </sl-gallery>
              )
      }
      </span>
    </host>
  );
};

KunRichMsg.props = {
  message: {
    type: Object,
  },
};

export default getComponentOrDefine("kun-rich-msg", KunRichMsg);
