import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import { Aioha, initAioha, KeyTypes } from '@aioha/aioha'
import { Magi, type BtcClient } from '@aioha/magi'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { BitcoinAdapter, type BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
import { mainnet, bitcoin } from '@reown/appkit/networks'
import { createAppKit } from '@reown/appkit'
import '@aioha/magi-ui'

@customElement('app-root')
export class AppRoot extends LitElement {
  @state() private _modalDisplayed = false
  @state() private _btcClient?: BtcClient

  private _aioha = initAioha()
  private _magi = new Magi()
  private _wagmiAdapter = new WagmiAdapter({ networks: [mainnet], projectId: 'YOUR_PROJECT_ID' })
  private _btcAdapter = new BitcoinAdapter({ projectId: 'YOUR_PROJECT_ID' })

  private _appKit = createAppKit({
    adapters: [this._wagmiAdapter, this._btcAdapter],
    networks: [mainnet, bitcoin],
    projectId: 'YOUR_PROJECT_ID'
  })

  connectedCallback() {
    super.connectedCallback()
    this._magi.setAioha(this._aioha)
    this._appKit.subscribeAccount((account) => {
      if (account.caipAddress?.startsWith('bip122:') && account.isConnected && account.address) {
        const provider = this._appKit.getProvider<BitcoinConnector>('bip122')
        if (provider) {
          const address = account.address
          this._btcClient = {
            address,
            signMessage: (msg: string) => provider.signMessage({ address, message: msg })
          }
        }
      } else if (account.caipAddress?.startsWith('bip122:')) {
        this._btcClient = undefined
      }
    })
  }

  render() {
    return html`
      <button @click=${() => (this._modalDisplayed = true)}>Connect</button>
      <aioha-provider .aioha=${this._aioha}>
        <magi-provider .magi=${this._magi} .wagmiConfig=${this._wagmiAdapter.wagmiConfig} .btcClient=${this._btcClient}>
          <magi-modal
            ?displayed=${this._modalDisplayed}
            .loginOptions=${{ msg: 'Login', keyType: KeyTypes.Posting }}
            .openEthModal=${() => this._appKit.open({ view: 'Connect', namespace: 'eip155' })}
            .openBtcModal=${() => this._appKit.open({ view: 'Connect', namespace: 'bip122' })}
            .onClose=${() => (this._modalDisplayed = false)}
          ></magi-modal>
        </magi-provider>
      </aioha-provider>
    `
  }
}