import { computed, ref } from 'vue'
import { useSites, type Site } from '@/composables/useSites'
import type { ArticleListQuery } from '@/lib/articleListQuery'

export function useArticleSites(shownSite: () => string) {
	const { listSites } = useSites()
	const sites = ref<Site[]>([])
	const sitesSettled = ref(false)

	const severalSites = computed(() => sites.value.length > 1)
	const siteName = computed(
		() => sites.value.find((site) => site.key === shownSite())?.name ?? shownSite(),
	)

	async function fetchSites() {
		try {
			sites.value = await listSites()
		} catch {
			sites.value = []
		}
	}

	function loadSites() {
		return fetchSites().finally(() => {
			sitesSettled.value = true
		})
	}

	function usableSite(query: ArticleListQuery): ArticleListQuery {
		const known = severalSites.value && sites.value.some((site) => site.key === query.site)
		return query.site && !known ? { ...query, site: '' } : query
	}

	return { sites, sitesSettled, severalSites, siteName, loadSites, usableSite }
}