<template>
  <main v-if="page.inspirations" class="flex flex-col">
    <header class="flex">
      <h2 id="tabslist" class="sr-only">Inspirations</h2>
      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
      <Selector
        v-if="page.inspirations.length > 1"
        :all="page.inspirations"
        @update:currentInspiration="changeInspiration"
      />
    </header>
    <section :id="currentTab" class="inspiration">
      <Header
        v-if="currentTab !== 'favorites'"
        :inspiration="currentInspiration"
      />
      <div class="masonry flow">
        <template v-for="(item, index) in displayedImages" :key="item.id">
          <Image
            :item="item"
            :inspirationUri="currentInspiration.uri"
            :currentTab="currentTab"
          />
        </template>
      </div>
    </section>
  </main>
</template>

<script setup>
import Selector from "../components/inspirations/Selector.vue";
import Header from "../components/inspirations/Header.vue";
import Tabs from "../components/Tabs.vue";
import Image from "../components/inspirations/Image.vue";
import { useUserStore } from "../stores/user";
import { ref, computed } from "vue";
import { usePageStore } from "../stores/page";
import { storeToRefs } from "pinia";

// Stores
const { page } = storeToRefs(usePageStore());
const userStore = useUserStore();
const user = computed(() => userStore.user);

// Reactive
const currentTab = ref("all");
const currentInspiration = ref(page.value.inspirations[0]);

// Computed
const allImages = computed(() => {
  if (!page.value.inspirations) return [];
  return page.value.inspirations.flatMap((inspiration) => inspiration.media);
});

const favoriteImages = computed(() =>
  allImages.value.filter(
    (image) => image.favoriteForUsers?.includes(user.value.uuid) ?? false
  )
);

const tabs = computed(() => [
  {
    label: "Les Inspirations",
    id: "all",
    icon: null,
    count: currentInspiration.value.media.length,
    isActive: currentTab.value === "all",
  },
  {
    label: "Mes Favoris",
    id: "favorites",
    icon: "favorite",
    count: favoriteImages.value.length,
    isActive: currentTab.value === "favorites",
  },
]);

const displayedImages = computed(() =>
  currentTab.value === "favorites"
    ? favoriteImages.value
    : currentInspiration.value.media
);

// Methods
function changeTab(newValue) {
  currentTab.value = newValue;
}

function changeInspiration(newValue) {
  currentInspiration.value = newValue;
}
</script>

<style scoped>
/* Header */
main > header {
  gap: var(--space-16);
}
/* Tabs */
[role="tablist"] {
  margin-left: 0;
}
</style>
