<template>
  <div class="fc-artist-posts">
    <v-alert v-if="store.error" type="error" variant="tonal" closable class="mb-3">
      {{ String(store.error) }}
    </v-alert>

    <div v-if="store.loading && store.items.length === 0" class="fc-artist-posts__loading">
      <v-progress-circular indeterminate color="accent" size="36" />
    </div>

    <div v-else-if="store.items.length === 0 && store.done" class="fc-artist-posts__empty">
      <p>No posts for this artist yet. Switch to
        <a href="#" @click.prevent="$emit('switch-tab', 'gallery')">Gallery</a>
        to see imported images, or visit
        <RouterLink to="/subscriptions">Subscriptions</RouterLink>
        to start capturing posts.
      </p>
    </div>

    <div v-else>
      <PostCard v-for="p in store.items" :key="p.id" :post="p" />
      <div ref="sentinel" class="fc-artist-posts__sentinel">
        <v-progress-circular v-if="store.loading" indeterminate color="accent" size="24" />
        <span v-else-if="store.done" class="fc-artist-posts__end">End of stream</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { RouterLink } from 'vue-router'

import { usePostsStore } from '../../stores/posts.js'
import { useInfiniteScroll } from '../../composables/useInfiniteScroll.js'
import PostCard from '../posts/PostCard.vue'

const props = defineProps({
  artistId: { type: Number, required: true },
})

defineEmits(['switch-tab'])

const store = usePostsStore()
const sentinel = ref(null)

async function reload () {
  await store.loadInitial({ artist_id: props.artistId, platform: null })
}

watch(() => props.artistId, reload)

useInfiniteScroll(sentinel, () => store.loadMore(), { rootMargin: '400px 0px' })

onMounted(reload)
</script>

<style scoped>
.fc-artist-posts {
  max-width: 1600px;
  margin: 0 auto;
}
.fc-artist-posts__loading,
.fc-artist-posts__empty {
  display: flex;
  justify-content: center;
  padding: 2rem;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-artist-posts__sentinel {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  min-height: 2rem;
}
.fc-artist-posts__end {
  color: rgb(var(--v-theme-on-surface-variant));
  font-size: 0.85rem;
}
</style>
