import { FC } from "react";
import Twemoji from "@/components/Twemoji";

import { IMessageItemProps } from ".";
import styles from "./message-item.module.scss";
import { FileOutlined } from "@ant-design/icons";
import { Flex, Space } from "antd";
import { MessageStatus } from "@openim/wasm-client-sdk";

const FileMessageRender: FC<IMessageItemProps> = ({ message }) => {
  const fileElem = message.fileElem || { fileName: "", fileSize: 0, sourceUrl: "" };
  const isSucceed = message.status === MessageStatus.Succeed;
  const getFileSize = () => {
    const fileSize = fileElem.fileSize / 1024;
    if (fileSize > 1024) {
      return (fileSize / 1024).toFixed(2) + 'M';
    } else {
      return fileSize.toFixed(1) + 'KB';
    }
  };
  return (
    <Twemoji dbSelectAll>
      <Flex className={styles.bubble}>
        <FileOutlined style={{ fontSize: "28px", marginRight: "6px" }} />
        <div>
          <div>{fileElem.fileName}</div>
          {isSucceed ? (
            <Space>
              <span style={{ color: "gray" }}>{getFileSize()}</span>-
              <a
                href={fileElem.sourceUrl}
                download={fileElem.fileName}
                style={{ color: "#0289fa" }}
              >
                下载
              </a>
            </Space>
          ) : (
            "上传中..."
          )}
        </div>
      </Flex>
    </Twemoji>
  );
};

export default FileMessageRender;
