<template>
  <div class="upload-modal">
    <div class="backdrop" @click="$emit('close')"></div>
    <div class="dialog">
      <h3>Upload Preview</h3>
      <input type="file" accept="image/*" @change="onFile" />
      <div v-if="preview" class="preview">
        <img :src="preview" alt="preview" />
      </div>
      <div class="actions">
        <button @click="$emit('close')">Close</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
defineProps({ selection: { type: Object, default: null } });
const preview = ref<string | null>(null);

function onFile(e: Event) {
  const input = e.target as HTMLInputElement | null;
  const file = input && input.files ? input.files[0] : null;
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (ev) => {
    preview.value = ev.target && (ev.target as FileReader).result as string | null;
  };
  reader.readAsDataURL(file);
}
</script>

<style scoped>
.upload-modal .backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.upload-modal .dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1rem;
  border-radius: 8px;
  width: 90%;
  max-width: 560px;
}
.preview img {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>
