import { BrowserOAuthClient } from '@atproto/oauth-client-browser'

import './marque-dns.js'
import { MarqueCubit, POLICY } from './marque-cubit.js'
import { pageClientId, requestScope } from 'atlibs/oauth/index.js'
import { createPluginContext } from 'atlibs/plugin-context/index.js'
import { loadModule, localModule } from 'atlibs/run-module/index.js'

const ctx = createPluginContext({ id: 'marque' })
const modules = new URL('./modules/', import.meta.url)
// ?module=local runs your `cargo wasm` build; ?module=<handle>/<name> (or at://...) a published module record.
const ref = new URLSearchParams(location.search).get('module') ?? 'local'
const marque = ref === 'local' ? localModule(new URL('marque.wasm', modules), new URL('marque.json', modules)) : loadModule(ctx, ref)

// On 127.0.0.1 the loopback client; deployed, the client `atlibs stage --target spa` wrote beside the page.
const clientId = pageClientId(requestScope(POLICY, ['marque']))
const cubit = new MarqueCubit({
	ctx,
	client: clientId.then((clientId) => BrowserOAuthClient.load({ clientId, handleResolver: 'https://bsky.social' })),
	marque,
})

// Wiring only: component events go to the cubit, cubit state goes to the component.
const view = document.querySelector('marque-dns')
document.addEventListener('login', (e) => cubit.login(e.detail))
document.addEventListener('logout', () => cubit.logout())
document.addEventListener('view', (e) => cubit.domains(e.detail))
document.addEventListener('open', (e) => cubit.open(e.detail))
document.addEventListener('dns-change', (e) => cubit.change(e.detail.entry, e.detail.fields))
cubit.subscribe((state) => view.render(state))
await cubit.init()