<template>
  <div>
    <label v-if="label" @click="browse" class="cursor-pointer text-gray-light text-lg mb-2">{{ label }}:</label>
    <div :class="{ error: error }">
      <input
        ref="file"
        type="file"
        :accept="accept"
        multiple
        class="hidden"
        @change="change"
      />
      <div v-if="!modelValue" class="py-2">
        <button
          type="button"
          class="px-6 py-2 bg-indigo-300 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:outline-none focus:border-transparent rounded-sm text-sm text-white"
          @click="browse"
        >
          Выбрать файлы
        </button>
      </div>
      <div v-else class="flex flex-col justify-center max-w-lg mt-3 p-2 border rounded-md">
        <div
          v-for="(file, index) in modelValue"
          :key="index"
          class="flex items-center justify-between p-1"
        >
          <div class="flex-1 pr-1 text-gray">
            {{ file.name }}
            <span class="text-xs text-gray-light"
              >({{ filesize(file.size) }})</span
            >
          </div>
          <button
            type="button"
            class="px-4 py-1 bg-indigo-300 hover:bg-indigo-100 rounded-sm text-xs font-medium text-white"
            @click="remove(index)"
          >
            Удалить
          </button>
        </div>
      </div>
    </div>
    <div v-if="error" class="text-red text-sm">{{ error }}</div>
  </div>
</template>

<script>
import helper from "@/includes/helper";
export default {
  props: {
    modelValue: FileList,
    label: String,
    accept: String,
    error: String,
  },
  emits: ["fileTime", "loadFileStart", "update:modelValue"],
  watch: {
    modelValue(value) {
      if (!value) {
        this.$refs.file.value = "";
      }
    },
  },
  methods: {
    filesize(size) {
      var i = Math.floor(Math.log(size) / Math.log(1024));
      return (
        (size / Math.pow(1024, i)).toFixed(2) * 1 +
        " " +
        ["B", "kB", "MB", "GB", "TB"][i]
      );
    },
    browse() {
      this.$refs.file.click();
    },
    change(e) {
      const files = Array.from(e.target.files);
      const that = this;
      files.map(function (file) {
        that.$emit("loadFileStart");
        var audioCtx = new (AudioContext || webkitAudioContext)();
        var readerAudio = new FileReader();
        readerAudio.readAsArrayBuffer(file);
        readerAudio.onload = function (ev) {
          audioCtx.decodeAudioData(ev.target.result).then(function (buffer) {
            that.$emit(
              "fileTime",
              file.name + "," + that.formatTimeSong(buffer.duration)
            );
          });
        };
      });
      this.$emit("update:modelValue", e.target.files);
    },

    formatTimeSong(value) {
      return helper.formatTime(value);
    },

    remove(file_index) {
      const dt = new DataTransfer();
      let files = Array.from(this.$refs.file.files);

      files.map(function (file, index) {
        if (index !== file_index) {
          dt.items.add(file);
        }
      });
      if (dt.files.length) {
        this.$refs.file.files = dt.files;
        this.$emit("update:modelValue", dt.files);
      } else {
        this.$refs.file.files = null;
        this.$emit("update:modelValue", null);
      }
    },
  },
};
</script>
