import { Component, h, useProp } from "atomico";
import dayjs from "dayjs";
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-chat-message.css";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { CONST_SIX_CONFIG } from "../../common/config";

export const getKunImageUrl = (url?: string): string|undefined => (url != null ? `${CONST_SIX_CONFIG.FILE_DOMAIN}${url}` : url);

const KunChatMessage = () => {
  const [item1] = useProp<ChatMessageRecord>("item");
  const item: ChatMessageRecord = Option.of(item1).getOrElse({
    channelId: 50,
    fromUser: null,
    fromUserAvatar: null,
    fromUserName: null,
    createAt: 1,
    groupId: "180cbc30-b472-11e9-9308-23b182dba4a3",
    msgContent: "message 6",
    msgId: "988af500-b8ac-11e9-838a-796d3a02af3a",
    msgType: "TEXT",
  } as ChatMessageRecord);

  return (
    <host shadowDom>
      <style>{style}</style>
      <div>
        <div className="chat-item-update-time" />
        <div className="chat-item">
          <div className="chat-item-left w-full flex">
            <div className="chat-item-needleAvatar flex-none">
              <kun-image-or-default
                url={getKunImageUrl(item.fromUserAvatar)}
                width={36}
                height={36}
              />
            </div>
            <div className="message-box w-full flex-auto cursor-pointer">
              <div class="flex flex-row">
                <span className="chat-item-username mr-4">{item.fromUserName || "用户"}</span>
                <span className="date-time">
                  {dayjs(item.createAt).format("YYYY-MM-DD HH:mm")}
                </span>
              </div>
              <div className="chat-item-needleContent">
                {item.msgContent}
              </div>
            </div>
          </div>
        </div>
      </div>
    </host>
  );
};

KunChatMessage.props = {
  item: {
    type: Object,
  },
};

export default getComponentOrDefine("kun-chat-message", KunChatMessage);
