<template>
  <div
    class="drop-zone"
    @drop.prevent="handleDrop"
    @dragover.prevent="onDragOver"
    @dragenter.prevent="onDragEnter"
    @dragleave.prevent="onDragLeave"
    :class="{ 'drag-over': isDragOver }"
    @click="handleClick"
  >
    <div class="ma-4">
      <div class="icon-container mx-auto mb-1">
        <v-icon
          class="minsk-500"
          icon="cloud"
          size="large"
        />
      </div>
      <p class="shark-600 text-sm-regular">
        <span class="minsk-900 text-sm-semibold">{{
          t('texts.clickToUpload')
        }}</span>
        <span>{{ t('texts.orDragAndDrop') }}</span>
        <br />
        <span class="shark-600 text-xs-regular"
          >DICOM, UNITY, PNG, JPG, PDF (< 200MB)</span
        >
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

interface Props {
  onFilesDropped: (files: File[]) => void;
}

const props = defineProps<Props>();

const { t } = useI18n();

const isDragOver = ref<boolean>(false);

function handleDrop(event: DragEvent): void {
  isDragOver.value = false;
  if (event.dataTransfer?.files) {
    const files = Array.from(event.dataTransfer.files);
    props.onFilesDropped(files);
  } else {
    console.warn('No files were dropped.');
  }
}

function handleClick(): void {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.dcm,.unity,.png,.jpg,.jpeg,.pdf';
  input.multiple = true;
  input.onchange = () => {
    if (input.files && input.files.length > 0) {
      const selectedFiles = Array.from(input.files);
      props.onFilesDropped(selectedFiles);
    } else {
      console.warn('No files were selected.');
    }
  };
  input.click();
}

function onDragOver(): void {
  isDragOver.value = true;
}

function onDragEnter(): void {
  isDragOver.value = true;
}

function onDragLeave(): void {
  isDragOver.value = false;
}
</script>

<style scoped>
.drop-zone {
  width: 503px;
  height: auto;
  border: transparent;
  border-radius: 8px;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  background-color: #f7f7f8;
  cursor: pointer;
}

.drag-over {
  background-color: #c9d7fc;
}

.drop-zone p {
  margin: 0;
  color: #333;
}

.icon-container {
  background-color: white;
  height: 40px;
  width: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
