<template>
  <div>
    <div
      class="file is-primary"
      id="ignore"
      v-if="position === 'left'"
    >
      <label class="file-label">
        <input
          class="file-input"
          type="file"
          :id="docid"
          multiple
          name="resume"
          @change="doChange"
        />
        <span class="file-cta px-2">
          <span class="icon-text is-clickable">
            <SvgIcon v-bind="{ name: 'attach-file.svg', type: 'white', size: 22 }"></SvgIcon>
            <!--<span class="has-text-white">File</span>-->
          </span>
        </span>
      </label>
    </div>
    <div
      class="field is-grouped is-grouped-right"
      id="ignore"
      v-else
    >
      <div class="control">
        <div class="file is-primary">
          <label class="file-label">
            <input
              class="file-input"
              type="file"
              :id="docid"
              multiple
              name="resume"
              @change="doChange"
            />
            <span class="file-cta is-primary px-1">
              <span class="icon-text is-clickable">
                <SvgIcon v-bind="{ name: 'attach-file.svg', type: 'white', size: 22 }"></SvgIcon>
              </span>
            </span>
          </label>
        </div>
      </div>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      v-if="showmodal"
      @files="getFiles"
    ></Modal>
  </div>
</template>
<script>
export default {
  props: ["type", "position", "convert", "quality"],
  data() {
    return {
      loading: false,
      files: undefined,
      dataFiles: [],
      vtype: this.type || ["image"],
      showmodal: undefined,
      docid: this.$id(),
    };
  },
  methods: {
    getFileExtension(fileName) {
      if (!fileName || typeof fileName !== "string") return "";
      const parts = fileName.split(".");
      return parts.length > 1 ? parts.pop().toLowerCase() : "";
    },
    getType(ext) {
      // copied from 01-common.js
      const imageFormat = ["png", "jpg", "jpeg", "bmp", "gif", "svg", "webp"];
      const videoFormat = ["wmv", "avi", "mp4", "flv", "mov", "mpg", "amv", "rm"];

      if (ext === "pdf") return "pdf";
      if (imageFormat.includes(ext)) return "image";
      if (videoFormat.includes(ext)) return "video";
      return "file";
    },
    doChange() {
      this.dataFiles = [];
      const fileList = document.getElementById(this.docid).files;
      this.files = Array.from(fileList);
      if (this.files.length === 0) return;

      // Xác định giá trị convert: "1" nếu convert được bật, "0" nếu không
      const convertValue = this.convert ? "1" : "0";
      const qualityValue = this.convert && this.quality ? this.quality : null;

      this.files.map((v) => {
        const ext = this.getFileExtension(v.name);
        const type = this.getType(ext);

        if (!this.vtype.includes(type)) {
          this.$snackbar(`Định dạng file "${ext}" không hợp lệ`);
          return;
        }

        let file = this.$upload(v, type, 1, convertValue, qualityValue);
        this.dataFiles.push(file);
      });

      this.showmodal = {
        component: "media/UploadProgress",
        title: "Upload files",
        width: "700px",
        height: "200px",
        vbind: { files: this.dataFiles },
      };
      this.clearFileList();
    },
    clearFileList() {
      const fileInput = document.getElementById(this.docid);
      const dt = new DataTransfer();
      fileInput.files = dt.files;
    },
    getFiles(files) {
      this.$emit("files", files);
      setTimeout(() => (this.showmodal = undefined), 3000);
    },
  },
};
</script>
