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

import './knotless-repo.js'
import { KnotlessCubit, POLICY } from './knotless-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'

// ?module=<handle>/<name> (or at://...) runs a published module record; by default the `cargo wasm` build, through modules/.
const MODULE = new URLSearchParams(location.search).get('module')
const modules = new URL('./modules/', import.meta.url)
const ctx = createPluginContext({ id: 'knotless' })

// On 127.0.0.1 the loopback client; deployed, the client `atlibs stage --target spa` wrote beside the page.
const clientId = pageClientId(requestScope(POLICY, ['knotless']))

const cubit = new KnotlessCubit({
	ctx,
	client: clientId.then((clientId) => BrowserOAuthClient.load({ clientId, handleResolver: 'https://bsky.social' })),
	knotless: MODULE ? loadModule(ctx, MODULE) : localModule(new URL('knotless.wasm', modules), new URL('knotless.json', modules)),
})

// Wiring only: component events go to the cubit, cubit state goes to the component.
const view = document.querySelector('knotless-repo')
document.addEventListener('login', (e) => cubit.login(e.detail))
document.addEventListener('logout', () => cubit.logout())
document.addEventListener('create-repo', (e) => cubit.createRepo(e.detail))
document.addEventListener('commit', (e) => cubit.commit(e.detail))
cubit.subscribe((state) => view.render(state))
await cubit.init()