<template>
  <h2 id="tabslist" class="sr-only">Projets</h2>
  <template v-if="projects.length > 0">
    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
    <section
      v-if="currentTab === 'currentProjects'"
      id="projets-en-cours"
      role="tabpanel"
      tabindex="0"
      aria-labelledby="projets-en-cours-label"
      class="flow"
    >
      <Project
        v-for="project in currentProjects"
        :key="project.id"
        :project="project"
      />
    </section>
    <section
      v-else
      id="projets-archives"
      role="tabpanel"
      tabindex="0"
      aria-labelledby="projet-archives-label"
    >
      <Project
        v-for="project in archivedProjects"
        :key="project.id"
        :project="project"
      />
    </section>
  </template>
</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 } = 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></style>
