<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin dialog-form-card" style="min-width: 400px">
      <DefaultDialogHeader title="Trocar Imagem" @close="onDialogCancel" />

      <q-scroll-area class="dialog-form-scroll dialog-form-scroll--sm">
        <q-card-section class="q-pt-none q-pb-sm">
          <div class="text-caption text-grey-6 q-mb-xs">Personalizar</div>
          <DefaultImagePicker
            v-model="selectedFile"
            v-model:preview-url="previewUrl"
          />
        </q-card-section>
      </q-scroll-area>

      <q-card-actions align="right">
        <q-btn
          outline
          color="primary"
          label="Cancelar"
          @click="onDialogCancel"
        />
        <q-btn
          color="primary"
          label="Salvar"
          :disable="!selectedFile"
          @click="onSave"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultImagePicker from "src/components/defaults/DefaultImagePicker.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const selectedFile = ref(null);
const previewUrl = ref(null);

function onSave() {
  onDialogOK({ file: selectedFile.value, previewUrl: previewUrl.value });
}
</script>

<style scoped>
.preview-area {
  width: 100%;
  height: 200px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fafafa;
  overflow: hidden;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>
