import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { useApi } from '../composables/useApi.js'

const PAGE = 60

export const useArtistStore = defineStore('artist', () => {
  const api = useApi()
  const overview = ref(null)
  const images = ref([])
  const nextCursor = ref(null)
  const loading = ref(false)
  const imagesLoading = ref(false)
  const error = ref(null)
  const notFound = ref(false)
  let started = false

  async function load(slug) {
    overview.value = null
    images.value = []
    nextCursor.value = null
    notFound.value = false
    started = false
    error.value = null
    loading.value = true
    try {
      overview.value = await api.get(`/api/artist/${encodeURIComponent(slug)}`)
      await loadMoreImages(slug)
    } catch (e) {
      if (e.status === 404) notFound.value = true
      else error.value = e.message
    } finally {
      loading.value = false
    }
  }

  async function loadMoreImages(slug) {
    if (imagesLoading.value) return
    if (started && nextCursor.value === null) return
    imagesLoading.value = true
    try {
      const params = { limit: PAGE }
      if (nextCursor.value) params.cursor = nextCursor.value
      const body = await api.get(
        `/api/artist/${encodeURIComponent(slug)}/images`, { params }
      )
      images.value.push(...body.images)
      nextCursor.value = body.next_cursor
      started = true
    } catch (e) {
      error.value = e.message
    } finally {
      imagesLoading.value = false
    }
  }

  const hasMoreImages = computed(() => !started || nextCursor.value !== null)

  return {
    overview, images, loading, imagesLoading, error, notFound,
    hasMoreImages, load, loadMoreImages
  }
})