<template>
  <div class="fc-artist-gallery">
    <MasonryGrid
      :items="store.images"
      :loading="store.imagesLoading"
      :has-more="store.hasMoreImages"
      @load-more="store.loadMoreImages(props.slug)"
      @open="openImage"
    />
  </div>
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useArtistStore } from '../../stores/artist.js'
import { useModalStore } from '../../stores/modal.js'
import MasonryGrid from '../discovery/MasonryGrid.vue'

const props = defineProps({
  slug: { type: String, required: true },
})

const store = useArtistStore()
const modal = useModalStore()
const route = useRoute()
const router = useRouter()

onMounted(() => {
  const initial = parseInt(route.query.image, 10)
  if (!isNaN(initial)) modal.open(initial)
})

watch(() => route.query.image, (q) => {
  const id = parseInt(q, 10)
  if (!isNaN(id) && id !== modal.currentImageId) modal.open(id)
  else if (isNaN(id) && modal.currentImageId !== null) modal.close()
})

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

<style scoped>
.fc-artist-gallery { min-width: 0; }
</style>
