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

import './hello-count.js'
import './hello-status.js'
import { HelloCubit, POLICY } from './hello-cubit.js'
import { pageClientId, requestScope } from 'atlibs/oauth/index.js'
import { createPluginContext } from 'atlibs/plugin-context/index.js'
import { localModule } from 'atlibs/run-module/index.js'

const modules = new URL('./modules/', import.meta.url)
const local = (name) => localModule(new URL(`${name}.wasm`, modules), new URL(`${name}.json`, modules))

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

const cubit = new HelloCubit({
	ctx: createPluginContext({ id: 'hello' }),
	client: clientId.then((clientId) => BrowserOAuthClient.load({ clientId, handleResolver: 'https://bsky.social' })),
	hello: local('hello'),
	statusphere: local('statusphere'),
})

// Wiring only: component events go to the cubit, cubit state goes to the components.
const views = document.querySelectorAll('hello-count, hello-status')
document.addEventListener('count', (e) => cubit.count(e.detail))
document.addEventListener('login', (e) => cubit.login(e.detail))
document.addEventListener('status', (e) => cubit.setStatus(e.detail))
document.addEventListener('logout', () => cubit.logout())
cubit.subscribe((state) => views.forEach((view) => view.render(state)))
await cubit.init()