import { baseConfig } from "@/components/chain/wallet/PassportWallet";
import { checkout } from '@imtbl/sdk';

export class Widgets {
  constructor(_chainInstance) {
    this.bc = _chainInstance
  }

  async initWidget(provider) {
    provider = provider || this.bc.web3Provider;
    const checkoutSDK = new checkout.Checkout({
      baseConfig,
      passport: this.passportInstance,
      bridge: { enable: true },
      swap: { enable: true },
      onRamp: { enable: true }
    });
    
    const widgets = await checkoutSDK.widgets({
      config: { theme: checkout.WidgetTheme.DARK},
    });

    // RECOMMENDED - create all of the widgets once at the start of your application
    // use the created widgets throughout your application to mount and unmount in specific parts of your application
    // const connect = widgets.create(checkout.WidgetType.CONNECT);
    this.wallet = widgets.create(checkout.WidgetType.WALLET, {provider}); // you can optionally pass in additional config per widget
    this.swap = widgets.create(checkout.WidgetType.SWAP, {provider});
    this.bridge = widgets.create(checkout.WidgetType.BRIDGE, {provider});
    this.onramp = widgets.create(checkout.WidgetType.ONRAMP, {provider});
    this.comps = [this.wallet, this.swap, this.bridge, this.onramp]
    
    this.wallet.addListener(checkout.WalletEventType.CLOSE_WIDGET, () => {
      this.wallet.unmount();
    });
    this.swap.addListener(checkout.SwapEventType.CLOSE_WIDGET, () => {
      this.swap.unmount();
    });

    this.bridge.addListener(checkout.BridgeEventType.CLOSE_WIDGET, () => {
      this.bridge.unmount();
    });

    this.onramp.addListener(checkout.OnRampEventType.CLOSE_WIDGET, () => {
      this.onramp.unmount();
    });

    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_SWAP, (data) => {
      this.wallet.unmount();
      this.swap.mount('wallet', { fromTokenAddress: data.fromTokenAddress })
    })
    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_BRIDGE, (data) => {
      this.wallet.unmount();
      this.bridge.mount('wallet')
    })

    this.wallet.addListener(checkout.OrchestrationEventType.REQUEST_ONRAMP, (data) => {
      this.wallet.unmount();
      this.onramp.mount('wallet')
    })
  }

  showWallet() {
    this.wallet.mount('wallet');
  }

  showSwap() {
    this.swap.mount('wallet');
  }

  showOnramp() {
    this.onramp.mount('wallet');
  }

  showBridge() {
    this.bridge.mount('wallet');
  }

  removeAll() {
    this.wallet.removeListener(checkout.WalletEventType.CLOSE_WIDGET);
    this.swap.removeListener(checkout.SwapEventType.CLOSE_WIDGET);
    this.bridge.removeListener(checkout.BridgeEventType.CLOSE_WIDGET);
    this.onramp.removeListener(checkout.OnRampEventType.CLOSE_WIDGET);
    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_SWAP);
    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_BRIDGE);
    this.wallet.removeListener(checkout.OrchestrationEventType.REQUEST_ONRAMP);
    for (let comp of this.comps) {
      comp.unmount();
    }
  }
}