import { ref } from 'vue'
import { useApi } from '@/composables/useApi'
import type { MediaItem, MediaListResponse } from '@/composables/useMedia'

const LOOKUP_QUERY = 'page=1&size=100&sort=newest'

export function useMediaNames() {
	const { request } = useApi()
	const items = ref<Record<number, MediaItem>>({})

	function remember(item: MediaItem) {
		items.value = { ...items.value, [item.id]: item }
	}

	async function resolve(ids: (number | null | undefined)[]) {
		const wanted = ids.filter((id): id is number => typeof id === 'number')
		if (wanted.every((id) => id in items.value)) {
			return
		}
		try {
			const page = await request<MediaListResponse>(`/v1/media/?${LOOKUP_QUERY}`)
			const found = (page?.items ?? []).filter((item) => wanted.includes(item.id))
			found.forEach(remember)
		} catch {
			return
		}
	}

	function itemOf(id: number | null | undefined) {
		return typeof id === 'number' ? (items.value[id] ?? null) : null
	}

	return { itemOf, remember, resolve }
}