<template>
  <main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem">
    <header class="flex | bg-white | rounded-2xl | p-8">
      <router-link
        :to="'/' + page.parent"
        class="btn btn--white"
        data-icon="arrow-left"
        aria-labelledby="back-to-project"
      >
        <span id="back-to-project">Retour au projet</span>
      </router-link>
      <button
        class="btn | ml-auto"
        @click="validate"
        v-if="page.content.isvalidated != 'true'"
        :disabled="page.moodboard.length === 0"
        :title="
          page.moodboard.length === 0 ? 'Ajoutez au moins une image' : undefined
        "
      >
        Valider et envoyer le brief
      </button>
    </header>
    <component :is="stepsComponents[currentStep]" @update:step="changeStep" />
  </main>
</template>
<script setup>
import { ref } from 'vue';
import Intro from '../components/project/brief/Intro.vue';
import ModeSelection from '../components/project/brief/ModeSelection.vue';
import Images from '../components/project/brief/Images.vue';
import TitledPdfWrapper from '../components/project/TitledPdfWrapper.vue';
import { usePageStore } from '../stores/page';
import { storeToRefs } from 'pinia';
import { useApiStore } from '../stores/api';
import { useRoute } from 'vue-router';

const stepsComponents = {
  Intro,
  ModeSelection,
  Images,
  TitledPdfWrapper,
};

const { page } = storeToRefs(usePageStore());
const api = useApiStore();

const currentStep = ref(setInitialStep());

function changeStep(stepName) {
  currentStep.value = stepName;
}

function setInitialStep() {
  if (useRoute().query.step === 'images') {
    return 'Images';
  }
  const hasPDF = page.value?.content?.pdf?.length !== 0;
  const hasImages =
    page.value.content.moodboard.length !== 0 ||
    page.value.content.description.length !== 0;
  const isEmpty = !hasPDF && !hasImages;
  if (isEmpty) return 'Intro';
  if (hasImages) return 'Images';
}

function validate() {
  api.validateBrief(page.value.uri).then((res) => {
    location.href = '/' + page.value.parent;
  });
}
</script>

<style scoped>
@media (max-width: 540px) {
  #back-to-project {
    display: none;
  }
}
</style>
