<template>
  <section
    class="flex-1"
    :aria-labelledby="step.id"
    :data-status="setStatus(page.steps, page.content.currentstep, step)"
  >
    <h2 :id="step.id">
      <span :data-icon="step.id">{{ step.label }}</span>
    </h2>
    <div ref="cards-node" class="cards | flow">
      <component :is="cardsMap[step.id]" :step="step" />
    </div>
  </section>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { usePageStore } from "../../stores/page";
import { onMounted, useTemplateRef } from "vue";
import { useProjectStore } from "../../stores/project";
import ClientBrief from "./cards/ClientBrief.vue";
import MultipleDocuments from "./cards/MultipleDocuments.vue";
import SimpleDocument from "./cards/SimpleDocument.vue";
import VirtualSample from "./cards/VirtualSample.vue";
import PhysicalSample from "./cards/PhysicalSample.vue";

const { step } = defineProps({
  step: Object,
});

const cardsMap = {
  clientBrief: ClientBrief,
  proposal: MultipleDocuments,
  extendedBrief: SimpleDocument,
  industrialIdeation: SimpleDocument,
  virtualSample: VirtualSample,
  physicalSample: PhysicalSample,
};

dayjs.locale("fr");

const { page } = usePageStore();
const { setStatus } = useProjectStore();
const cardsNode = useTemplateRef("cards-node");

// Hooks
onMounted(() => {
  if (step.id === page.content.currentstep) {
    cardsNode.value.scrollIntoView({
      behavior: "smooth",
      inline: "center",
    });
  }
});
</script>

<style scoped>
.physical-sample header {
  color: var(--color-white);
  background: linear-gradient(
      90deg,
      hsla(0, 0%, 10%, 0.5) 0%,
      hsla(0, 0%, 10%, 0.9) 50%,
      hsla(0, 0%, 10%, 0.9) 100%
    ),
    var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
}
.physical-sample header > * {
  padding-inline: var(--space-16);
}
.physical-sample header h3 {
  position: initial;
}
</style>
