import * as plugins from '../plugins.js';

import {
  customElement,
  DeesElement,
  property,
  html,
  type TemplateResult,
  css,
  cssManager,
  state,
  domtools,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'idp-transfermanager': IdpTransfermanager;
  }
}

@customElement('idp-transfermanager')
export class IdpTransfermanager extends DeesElement {

  public appData: plugins.idpInterfaces.data.IApp;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        color: ${cssManager.bdTheme('#333333', '#ffffff')};
      }

      .box {
        cursor: pointer;
        overflow: hidden;
        transition: all 0.2s ease;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        margin-bottom: 20px;
        height: 56px;
        background: ${cssManager.bdTheme('#ffffff', '#181818')};
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
        text-align: center;
        padding: 20px;
      }
    `,
  ];

  public render() {
    return html`
      <div class="box">
        transfering
      </div>
    `;
  }

  public async handleTransfer() {
    const domtoolsInstance = await this.domtoolsPromise;
    const box = this.shadowRoot.querySelector('.box');
    const receptionClient = new plugins.idpClient.IdpClient(`https://reception.lossless.one:443`, this.appData);
    const transferToken = await receptionClient.getTransferToken();
    box.textContent = 'got transfer token...';
    console.log(this.appData.appUrl);
    const redirectUrl = domtoolsInstance.convenience.smarturl.Smarturl.createFromUrl(this.appData.appUrl, {
      searchParams: {
        'transfertoken': transferToken,
      }
    });
    box.textContent = `redirecting to app...`;
    window.location.href = redirectUrl.toString();
  }
}