<template>
  isFileImage
  <BmsBackButton :fallback="{ path: '/' }" />
  <h1>Platform library VueJS BMS</h1>
  <h2>With png file from url</h2>
  <bms-input-file label="editing a file" v-model="files"></bms-input-file>
  <hr />
  <h2>With svg as string representation</h2>
  <bms-input-file label="editing a file" v-model="svg"></bms-input-file>
  <hr />
  <h2>With no file</h2>
  <bms-input-file label="adding a file" v-model="add"></bms-input-file>
</template>

<script lang="ts" setup>
import { useNotifications } from '@/plugins/notifications';
import { onMounted, Ref, ref } from 'vue';
import { BmsBackButton, BmsInputFile } from '@/index';

const { success } = useNotifications();
const files: Ref<File[]> = ref([]);
const svg: Ref<File[]> = ref([]);
const add: Ref<File[]> = ref([]);

onMounted(async () => {
  const response = await fetch(
    'https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png',
  );
  const blob = await response.blob();
  files.value = [
    new File([blob], 'image.jpeg', {
      type: blob.type,
    }),
  ];
  files.value = [
    new File([blob], 'image.jpeg', {
      type: blob.type,
    }),
  ];

  // 0. si le svg est un element du dom
  //const svgString = new XMLSerializer().serializeToString(svgElement);
  // 1. convertir le svg
  const svgElement =
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-biohazard"><circle cx="12" cy="11.9" r="2"/><path d="M6.7 3.4c-.9 2.5 0 5.2 2.2 6.7C6.5 9 3.7 9.6 2 11.6"/><path d="m8.9 10.1 1.4.8"/><path d="M17.3 3.4c.9 2.5 0 5.2-2.2 6.7 2.4-1.2 5.2-.6 6.9 1.5"/><path d="m15.1 10.1-1.4.8"/><path d="M16.7 20.8c-2.6-.4-4.6-2.6-4.7-5.3-.2 2.6-2.1 4.8-4.7 5.2"/><path d="M12 13.9v1.6"/><path d="M13.5 5.4c-1-.2-2-.2-3 0"/><path d="M17 16.4c.7-.7 1.2-1.6 1.5-2.5"/><path d="M5.5 13.9c.3.9.8 1.8 1.5 2.5"/></svg>';
  // 2. Créer un Blob à partir du contenu SVG
  const svgBlob = new Blob([svgElement], { type: 'image/svg+xml' });
  // 3. Créer un objet File à partir du Blob
  svg.value = [
    new File([svgBlob], 'my-svg-file.svg', { type: 'image/svg+xml' }),
  ];
});
</script>

<style lang="scss" scoped>
.tooltip-flex {
  display: flex;
  gap: 16px;
}

.chips {
  display: flex;
  gap: 8px;
}

hr {
  border: none;
  border-top: 3px double var(--bms-grey-140);
  color: var(--bms-grey-140);
  overflow: visible;
  text-align: center;
  height: 5px;
}
</style>
