<template>
  <div
    :style="messageKitBlockStyle"
    class="bcc-chat-msg-bubble cc__file__bubble"
  >
    <div class="message__block">
      <div class="cc__file__title">
        <a
          :href="fileURL"
          target="_blank"
          :style="messageTitleStyle"
          class="cc__file__url"
          >{{ title }}</a
        >
      </div>
      <div :style="messageSubTitleStyle" class="cc__file__subtitle">
        {{ subtitle }}
      </div>
    </div>
    <div class="cc__file__icon">
      <a :href="fileURL" target="_blank">
        <i :style="messageFileIconStyle" />
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  fileURL: {
    type: String,
    default: "",
  },
  downloadIconURL: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  subtitle: {
    type: String,
    default: "",
  },
  fileStyle: {
    type: Object,
    default: () => ({
      width: "fit-content",
      height: "fit-content",
      border: "none",
      background: "transparent",
      borderRadius: "none",
      titleFont: "600 14px Archivo,Inter,sans-serif",
      titleColor: "rgb(20, 20, 20)",
      subtitleFont: "400 13px Archivo,Inter,sans-serif",
      subtitleColor: "rgba(20, 20, 20, 0.58)",
    }),
  },
});

const downloadIcon =
  "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EIcons%2F24%2FDownload%3C%2Ftitle%3E%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Icons%2F24%2FDownload%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%281.000000%2C%201.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolyline%20id%3D%22Path%22%20points%3D%227.33333333%2013.2%2011%2016.8666667%2014.6666667%2013.2%22%3E%3C%2Fpolyline%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%2211%22%20y1%3D%225.86666667%22%20x2%3D%2211%22%20y2%3D%2216.8666667%22%20id%3D%22Path%22%3E%3C%2Fline%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C11%20C0%2C17.0751322%204.92486775%2C22%2011%2C22%20C17.0751322%2C22%2022%2C17.0751322%2022%2C11%20C22%2C4.92486775%2017.0751322%2C0%2011%2C0%20C4.92486775%2C0%200%2C4.92486775%200%2C11%20Z%22%20id%3D%22Path%22%3E%3C%2Fpath%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
const downloadIconURL = props.downloadIconURL ?? downloadIcon;

const messageKitBlockStyle = computed(() => ({
  width: props.fileStyle.width,
  height: props.fileStyle.height,
  border: props.fileStyle.border,
  borderRadius: props.fileStyle.borderRadius,
  background: props.fileStyle.background,
}));

const messageTitleStyle = computed(() => ({
  font: props.fileStyle.titleFont,
  color: props.fileStyle.titleColor,
}));

const messageSubTitleStyle = computed(() => ({
  font: props.fileStyle.subtitleFont,
  color: props.fileStyle.subtitleColor,
}));

const messageFileIconStyle = computed(() => {
  let isDisable = !props.fileURL;
  return {
    WebkitMask: `url(${downloadIconURL})`,
    WebkitMaskSize: "contain",
    opacity: isDisable ? 0.5 : 1,
  };
});
</script>

<style scoped>
.cc__file__bubble {
  background: transparent;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
}
.message__block {
  word-wrap: break-word;
  text-align: left;
  overflow: hidden;
}
.cc__file__title {
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cc__file__url {
  all: unset;
  color: var(--cc__text-color);
  cursor: pointer;
}
.cc__file__subtitle {
  margin-top: 4px;
}
.cc__file__icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: fit-content;
  line-height: 36px;
}
.cc__file__icon i {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: var(--cc__accent);
}
</style>
