<template>
  <v-container fluid class="py-6">
    <div class="fc-showcase__head">
      <h1 class="fc-h1">Showcase</h1>
      <v-btn
        prepend-icon="mdi-shuffle-variant" variant="tonal" color="accent"
        :loading="store.loading" @click="store.shuffle()"
      >Shuffle</v-btn>
    </div>

    <v-alert v-if="store.error" type="error" variant="tonal" closable class="my-4">
      Failed to load: {{ store.error }}
    </v-alert>
    <v-alert v-else-if="store.isEmpty" type="info" variant="tonal" class="my-4">
      No images yet.
    </v-alert>

    <MasonryGrid
      :items="store.images"
      :loading="store.loading"
      :has-more="store.hasMore"
      @load-more="store.fetchPage()"
      @open="openImage"
    />
  </v-container>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useShowcaseStore } from '../stores/showcase.js'
import MasonryGrid from '../components/discovery/MasonryGrid.vue'

const store = useShowcaseStore()
const router = useRouter()

onMounted(() => { if (store.images.length === 0) store.fetchPage() })

function openImage(id) {
  router.push({ name: 'gallery', query: { image: id } })
}
</script>

<style scoped>
.fc-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px; font-weight: 500;
  color: rgb(var(--v-theme-on-surface));
}
.fc-showcase__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
</style>
