<template>
  <figure :style="'--bg-color:' + backgroundColor">
    <img :src="file.url" alt="" />
  </figure>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useVirtualSampleStore } from '../../../stores/virtualSample';
import { watch } from 'vue';

const { file, backgroundColor } = defineProps({
  backgroundColor: String,
  file: Object,
});

const { isDownloadTriggered } = storeToRefs(useVirtualSampleStore());

// Download image
watch(isDownloadTriggered, (newValue) => {
  if (!newValue) return;
  const downloadNode = document.createElement('a');
  downloadNode.setAttribute('href', file.source);
  downloadNode.setAttribute('download', '');
  document.body.appendChild(downloadNode);
  console.log(downloadNode);
  downloadNode.click();
  document.body.removeChild(downloadNode);
});
</script>
