import { Client, ok, simpleFetchHandler } from "@atcute/client"
import type { AppBskyFeedDefs } from "@atcute/bluesky"

const handler = simpleFetchHandler({ service: "https://public.api.bsky.app" })
const rpc = new Client({ handler })

declare const input: HTMLInputElement
declare const form: HTMLFormElement

function link(quote: AppBskyFeedDefs.PostView) {
	const a = document.createElement("a")
	a.href = quote.uri
		.replace("at://", "https://bsky.app/profile/")
		.replace("app.bsky.feed.post", "post")
	a.textContent = `${quote.author.displayName} (@${quote.author.handle}), ${quote.likeCount} likes`
	return a
}

let total = 0
async function walk(li, uri, count = 0) {
	const ul = document.createElement("ul")
	li.append(ul)
	for (let i = 0; i < count; i++) {
		const placeholderLi = document.createElement("li")
		placeholderLi.textContent = "Loading..."
		ul.append(placeholderLi)
	}
	const quotes = await ok(
		rpc.get("app.bsky.feed.getQuotes", {
			params: { uri, limit: 100 },
		}),
	)
	ul.innerHTML = ""
	console.log((total += quotes.posts.length))
	if (quotes.posts.length > 100)
		console.log("OH NO IT'S", quotes.posts.length)
	for (const quote of quotes.posts) {
		const childLi = document.createElement("li")
		ul.append(childLi)
		childLi.append(link(quote))
		if (quote.quoteCount) walk(childLi, quote.uri, quote.quoteCount)
	}
}

form.addEventListener("submit", (e) => {
	e.preventDefault()
	const url = input.value
	walk(
		document.body,
		url,
	)
})