<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{ file: [file: File] }>()
const isDragging = ref(false)
const input = ref<HTMLInputElement | null>(null)

function accept(files: FileList | null): void {
  const file = files?.[0]
  if (file) emit('file', file)
}
</script>

<template>
  <div
    class="dropzone"
    :class="{ dragging: isDragging }"
    @dragenter.prevent="isDragging = true"
    @dragover.prevent="isDragging = true"
    @dragleave.prevent="isDragging = false"
    @drop.prevent="isDragging = false; accept($event.dataTransfer?.files ?? null)"
  >
    <div class="drop-icon" aria-hidden="true">＋</div>
    <h2>Načítajte obrázok mozaiky</h2>
    <p>Presuňte sem PNG, JPEG alebo WebP, prípadne ho vyberte z počítača.</p>
    <button class="button primary" type="button" @click="input?.click()">Vybrať obrázok</button>
    <small>Obrázok zostáva vo vašom prehliadači a nikam sa neodosiela.</small>
    <input ref="input" hidden type="file" accept="image/png,image/jpeg,image/webp" @change="accept(($event.target as HTMLInputElement).files)" />
  </div>
</template>

<style scoped>
.dropzone { position: absolute; inset: 18px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; text-align: center; color: #475569; transition: border-color .12s, background .12s; }
.dropzone.dragging { border-color: #2563eb; background: #eff6ff; }
.dropzone h2 { margin: 0; color: #172033; font-size: 1.15rem; }
.dropzone p { max-width: 430px; margin: 0; }
.dropzone small { margin-top: 8px; color: #64748b; }
.drop-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #e2e8f0; color: #334155; font-size: 30px; font-weight: 300; }
</style>
