<template>
  <Images
    v-if="images.length > 0"
    :step="step"
    :images="images"
    :uri="'/' + step.uri"
  />
  <Document v-if="pdf" :step="step" :pdf="pdf" />

  <button
    v-if="images.length === 0"
    class="btn | w-full"
    @click="goToImagesBrief()"
  >
    Ajouter un brief via la plateforme
  </button>
  <div class="btn | w-full" v-if="!pdf">
    <label for="upload-pdf">
      Ajouter un brief PDF
      <input
        id="upload-pdf"
        type="file"
        @change="addPdf($event, step.uri)"
        accept="application/pdf"
        ref="pdfInput"
        hidden
      />
    </label>
  </div>
</template>

<script setup>
import { computed } from "vue";
import Images from "./Images.vue";
import Document from "./Document.vue";
import { useBriefStore } from "../../../stores/brief";
import { useRouter } from "vue-router";

const { step } = defineProps({ step: Object });
const { addPdf } = useBriefStore();
const router = useRouter();

const images = computed(() => {
  return step.files.filter((file) => file.type === "image");
});

const pdf = computed(() => {
  return step.files.find((file) => file.type === "document");
});

function goToImagesBrief() {
  router.push(location.pathname + "/client-brief?step=images");
}
</script>
