<template>
  <header class="flex">
    <h2 id="tabslist" class="sr-only">Projets</h2>
    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
  </header>
  <section
    v-if="currentTab === 'currentProjects'"
    id="projets-en-cours"
    role="tabpanel"
    tabindex="0"
    :aria-label="tabs[0].label"
    class="flow"
    :class="{ skeleton: isProjectsLoading }"
  >
    <Project
      v-for="project in currentProjects"
      :key="project.id"
      :project="project"
    />
  </section>
  <section
    v-else
    id="projets-archives"
    role="tabpanel"
    tabindex="0"
    :aria-label="tabs[1].label"
    class="flow"
  >
    <Project
      v-for="project in archivedProjects"
      :key="project.id"
      :project="project"
    />
  </section>
</template>
<script setup>
import Tabs from './Tabs.vue';
import Project from './project/Project.vue';
import { useProjectsStore } from '../stores/projects';
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';

const { projects, currentProjects, archivedProjects, isProjectsLoading } =
  storeToRefs(useProjectsStore());

const currentTab = ref('currentProjects');
const tabs = computed(() => {
  return [
    {
      label: 'Projets en cours',
      id: 'currentProjects',
      count: currentProjects.value.length,
      isActive: currentTab.value === 'currentProjects',
    },
    {
      label: 'Projets archivés',
      id: 'archivedProjects',
      count: archivedProjects.value.length,
      isActive: currentTab.value === 'archivedProjects',
    },
  ];
});

function changeTab(newValue) {
  currentTab.value = newValue;
}
</script>

<style scoped>
section {
  --flow-space: var(--space-16);
  min-height: calc(100vh - 8.5rem);
}
section:not(.skeleton):empty::after {
  content: 'Aucun projet pour le moment';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  max-width: 24ch;
  height: 8rem;
  margin: auto;
  font-size: var(--text-sm);
  color: var(--color-grey-700);
  background-image: var(--icon-document-thin);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: var(--space-40);
}
</style>
