<template>
  <div class="attaches-block">
    <div
      :data-extension="data.file.extension"
      :style="{ color: color }"
      class="attaches-block-file-icon"
    >
      <svg width="32" height="40">
        <path
          v-if="color"
          d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
        />
        <g v-else fill="#A8ACB8" fill-rule="evenodd">
          <path
            fill-rule="nonzero"
            d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
          />
          <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z" />
        </g>
      </svg>
    </div>
    <div class="attaches-block-file-info">
      <p class="attaches-block-title">{{ data.file.name }}</p>
      <p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
    </div>
    <a :href="data.file.url" class="attaches-block-file download-button"></a>
  </div>
</template>

<script>
import byteFormatter from "../filters/byteFormatter";

const extensions = {
  doc: "#3e74da",
  docx: "#3e74da",
  odt: "#3e74da",
  pdf: "#d47373",
  rtf: "#656ecd",
  tex: "#5a5a5b",
  txt: "#5a5a5b",
  pptx: "#e07066",
  ppt: "#e07066",
  mp3: "#eab456",
  mp4: "#f676a6",
  xls: "#3f9e64",
  html: "#2988f0",
  htm: "#2988f0",
  png: "#f676a6",
  jpg: "#f67676",
  jpeg: "#f67676",
  gif: "#f6af76",
  zip: "#4f566f",
  rar: "#4f566f",
  exe: "#e26f6f",
  svg: "#bf5252",
  key: "#e07066",
  sketch: "#df821c",
  ai: "#df821c",
  psd: "#388ae5",
  dmg: "#e26f6f",
  json: "#2988f0",
  csv: "#3f9e64"
};

export default {
  filters: {
    byteFormatter
  },
  props: ["data"],
  computed: {
    color() {
      return extensions[this.data.file.extension];
    }
  }
};
</script>