<template>
  <Dialog
    :visible="uploadModal"
    modal
    :style="{ width: '90vw', height: '90vh' }"
    :contentClass="contentClass"
    @update:visible="emit('closeModal', $event)"
  >
    <template #header>
      <div class="py-5"></div>
    </template>
    <label for="uploadFiles">
      <div
        class="h-full flex flex-col justify-center items-center p-4 space-y-4 relative"
      >
        <input
          id="uploadFiles"
          class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
          type="file"
          accept="text/csv"
          @change="upload($event)"
        />
        <IconUploarding class="loader-arrow-upward"></IconUploarding>
        <p class="text-neutral-900">Click or drag a file here.</p>
        <p class="text-neutral-500">
          (Only <span class="text-primary">.csv</span> is supported)
        </p>
      </div>
    </label>
  </Dialog>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/File/UploadModal File upload modal dialog
 *   with drag-and-drop support for CSV files (max 90 MB).
 */

import { onBeforeUnmount } from "vue";
import { storeToRefs } from "pinia";
import IconUploarding from "../icons/IconUploarding.vue";
import { uploadFailedFirst } from "@/module/alertModal.js";
import { useFilesStore } from "@/stores/files";

defineProps(["uploadModal"]);
const emit = defineEmits(["closeModal"]);

const filesStore = useFilesStore();
const { uploadFileName } = storeToRefs(filesStore);

const contentClass = "h-full";

/**
 * Handles CSV file upload: validates size, sends to API, extracts filename.
 * @param {Event} event - The file input change event.
 */
async function upload(event) {
  const fileInput = document.getElementById("uploadFiles");
  const target = event.target;
  const formData = new FormData();
  let uploadFile;

  // Check if a file exists
  if (target && target.files) {
    uploadFile = target.files[0];
  }
  if (!uploadFile) return;
  // File size must not exceed 90 MB (90*1024*1024 = 94,371,840 bytes)
  if (uploadFile.size >= 94371840) {
    fileInput.value = "";
    return uploadFailedFirst("size");
  }
  // Append the file to formData; the field name must be "csv"
  formData.append("csv", uploadFile);
  // Call the first-stage upload API
  if (uploadFile) {
    await filesStore.upload(formData);
  }
  if (uploadFile.name.endsWith(".csv")) {
    uploadFileName.value = uploadFile.name.slice(0, -4);
  } else {
    // Handle error or invalid file format
    uploadFileName.value = ""; // Or other appropriate error handling
  }
  // Clear the selected file
  if (fileInput) {
    fileInput.value = "";
  }
}

onBeforeUnmount(() => {
  emit("closeModal", false);
});
</script>
<style scoped>
.loader-arrow-upward {
  animation: bump 0.6s linear infinite alternate;
}
@keyframes bump {
  0% {
    transform: translate(0%, 5px);
  }
  100% {
    transform: translate(0%, -5px);
  }
}
</style>
