<template>

  <div class="image-wrapper">
    <FileUpload name="demo[]" @select="handleUpload($event)" :multiple="false" :auto="true" accept="image/*" :maxFileSize="110000">
      <template #empty>
        <span>Drag and drop files to here to upload.</span>
      </template>
    </FileUpload>
  </div>

</template>

<script setup>
import FileUpload from 'primevue/fileupload';
import { useToast } from "primevue/usetoast";
import { usePlantStateStore } from "@/stores/plantState.js";
const toast = useToast();
import router from "@/router";

const plantStateStore = usePlantStateStore();

async function handleUpload(event) {
  console.log(event)
  const file = event.files[0]
  const reader = new FileReader()
  reader.onload = async () => {
    plantStateStore.setImage(reader.result)
  }
  reader.readAsDataURL(file)

  toast.add({ severity: 'success', summary: 'What a lovely plant you have!', detail: 'File Uploaded', life: 3000 });
  router.push('/help');
}

</script>

<style scoped>
:deep(.p-fileupload-upload-button) {
  display: none !important;
}
</style>
