<template>
  <main class="flex flex-col items-stretch | w-full">
    <Header :title="page.content.title" />

    <DialogWrapper v-if="dialog.content" />

    <div class="kanban">
      <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
    </div>

    <DTLPanel
      v-if="isDTLPanelOpen"
      :proposals="page.designToLight"
      @close="isDTLPanelOpen = false"
    />
    <DTLButton
      v-if="page?.designToLight?.length > 0"
      @click="toggleDTLPanel($event)"
    />
  </main>
</template>

<script setup>
import ProjectStep from '../components/project/ProjectStep.vue';
import Header from '../components/project/Header.vue';
import DialogWrapper from '../components/project/DialogWrapper.vue';
import { usePageStore } from '../stores/page';
import { storeToRefs } from 'pinia';
import { watch, ref } from 'vue';
import { useDialogStore } from '../stores/dialog';
import { useRoute } from 'vue-router';
import DTLButton from '../components/design-to-light/DTLButton.vue';
import DTLPanel from '../components/design-to-light/DTLPanel.vue';

const { page } = storeToRefs(usePageStore());
const dialog = useDialogStore();

const route = useRoute();

if (route.query.dialog) {
  openDialog(route.query.dialog);
}

const isDTLPanelOpen = ref(false);

watch(
  () => route.query.dialog,
  (targetStepSlug) => {
    if (targetStepSlug) {
      const targetStep = page.value.steps.find(
        (step) => step.slug === targetStepSlug
      );
      dialog.content = targetStep;
    } else {
      dialog.content = null;
    }
  }
);

// Functions
function openDialog(targetStepSlug) {
  const targetStep = page.value.steps.find(
    (step) => step.slug === targetStepSlug
  );
  dialog.content = targetStep;
}

function toggleDTLPanel(event) {
  isDTLPanelOpen.value = !isDTLPanelOpen.value;
  event.stopImmediatePropagation();
}
</script>
