import { config, passport, orderbook, checkout } from '@imtbl/sdk';
import { providers } from 'ethers';
import { cfgChainId } from '@/components/chain/utils.js';

const environment = process.env.NODE_ENV === 'production' ? config.Environment.PRODUCTION : config.Environment.SANDBOX; 
const publishableKey = import.meta.env.VUE_APP_PASSPORT_PUBLISHABLE_KEY
const clientId = import.meta.env.VUE_APP_PASSPORT_CLIENT_ID
const redirectUri = import.meta.env.VUE_APP_PASSPORT_REDIRECT_URI
const logoutRedirectUri = import.meta.env.VUE_APP_PASSPORT_LOGOUT_URI


export const baseConfig = { environment, publishableKey }
export class PassportWallet {
  constructor() {
    if (PassportWallet.instance) {
      return PassportWallet.instance;
    }
    PassportWallet.instance = this;
    this.passportInstance = new passport.Passport({
      baseConfig,
      clientId, // replace with your client ID from Hub
      redirectUri, // replace with one of your redirect URIs from Hub
      logoutRedirectUri, // replace with one of your logout URIs from Hub
      logoutMode: 'silent',
      audience: 'platform_api',
      scope: 'openid offline_access email transact',
      popupOverlayOptions: {
        disableGenericPopupOverlay: false, // Set to true to disable the generic pop-up overlay
        disableBlockedPopupOverlay: false, // Set to true to disable the blocked pop-up overlay
      }
    });
    this.passportInstance.loginCallback().then(()=>{}).catch(err=>{});
    this.client = new orderbook.Orderbook({ baseConfig });
  }
  async initWidget() {
    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);
    const wallet = widgets.create(checkout.WidgetType.WALLET); // you can optionally pass in additional config per widget
    const swap = widgets.create(checkout.WidgetType.SWAP);
    const bridge = widgets.create(checkout.WidgetType.BRIDGE);
    const onramp = widgets.create(checkout.WidgetType.ONRAMP);

    // Mount the wallet widget passing the element id of where to mount the widget
    connect.mount('wallet');
  }
  get nativeProvider() {
    return this.passportInstance.connectEvm();
  }

  async web3Provider() {
    const passportProvider = this.passportInstance.connectEvm();
    const accounts = await passportProvider.request({ method: "eth_requestAccounts" });
    const provider = new providers.Web3Provider(passportProvider);
    const token = await this.passportInstance.getIdToken()
    return { provider, accounts, token };
  }
  

  async getAccessToken() {
    const token = await this.passportInstance.getIdToken();
    return { token }
  }

  async logout() {
    await this.passportInstance.logout();
    await this.passportInstance.logoutSilentCallback(logoutRedirectUri);
  }

  async getChainId() {
    return Promise.resolve(cfgChainId)
  }
}