export interface IframeParams {
  el: HTMLDivElement | null;
  sandboxAttributes?: Array<string>;
}

class Iframe {
  $el: HTMLDivElement;
  sandboxAttributes: Array<string>;

  constructor({ el, sandboxAttributes = [] }: IframeParams) {
    if (!el) {
      throw new Error('Expect "el" to mount iframe!');
    }
    this.$el = el;
    this.sandboxAttributes = sandboxAttributes;
  }

  setProps(obj: any) {
    const iframe = this.createIframe(obj);
    this.$el.parentNode?.replaceChild(iframe, this.$el);
    this.$el = iframe;
  }

  createIframe(obj: any): HTMLIFrameElement {
    const { view, className } = obj;
    const iframe = document.createElement('iframe');
    iframe.setAttribute('sandbox', this.sandboxAttributes.join(' '));
    iframe.setAttribute('scrolling', 'yes');

    view.id = iframe.id =
      Math.random().toString(36).substring(5) + '-' + Date.now();
    iframe.setAttribute(
      'src',
      addParameterToURL(view.url, 'paypaySimulatorIframeID=' + iframe.id)
    );
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = '0';
    if (className) {
      iframe.classList.add(className);
    }
    return iframe;
  }
}

function addParameterToURL(url: string, param: string) {
  url += (url.split('?')[1] ? '&' : '?') + param;
  return url;
}

/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */
export default (params: IframeParams) => new Iframe(params);