import { renderApp, unrenderApp } from '@dlghq/rxjs-sdk-app';
export class DialogSDK {
  constructor(private token: string = '$TBD$', private endpoint: string) {}
  private renderCalled = false;
  private prefix = 'dlg:';
  private view!: HTMLElement;

  makeMessage<T extends object>(type: string, message: T) {
    return {
      type: this.prefix.concat(type),
      payload: message,
    };
  }

  goToPeer(peerId: string) {
    this.sendMessage('goToPeer', { peerId });
  }

  showSpinner() {
    this.sendMessage('pending', {});
  }

  sendMessage<T extends object>(type: string, payload: T) {
    // Send message only to the current origin for now
    window.postMessage(this.makeMessage(type, payload), window.location.origin);
  }

  bind(view: HTMLElement) {
    window.performance.mark('APP_RUN_MARK');
    renderApp({ endpoint: this.endpoint }, view, this.token);
    this.view = view;
    this.renderCalled = true;
  }

  setToken(token: string) {
    this.token = token;
    if (this.renderCalled) {
      renderApp({ endpoint: this.endpoint }, this.view, token);
    }
  }

  removeApp() {
    if (this.renderCalled) {
      unrenderApp();
    }
  }

  setColors(obj: Record<string, string | null>) {
    Object.entries(obj).forEach(([key, val]) =>
      document.documentElement.style.setProperty(key, val),
    );
  }
}

// eslint-disable-next-line
export default {
  DialogSDK,
};