import { html, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { ref, createRef } from 'lit/directives/ref.js';

export class VaaEmbed extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    iframe {
      width: 100%;
      height: 720px;
    }
  `;

  private _iframeRef = createRef();

  private _handleResizeMessage = (event: MessageEvent) => {
    if (event.origin !== this.src.origin) return;

    if (event.data?.height) {
      const iframe = this._iframeRef.value as HTMLIFrameElement;
      iframe.style.height = `${event.data.height}px`;
    }
  };

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('message', this._handleResizeMessage);
  }

  disconnectedCallback() {
    window.removeEventListener('message', this._handleResizeMessage);
    super.disconnectedCallback();
  }

  @property({
    converter: {
      fromAttribute: value =>
        value ? new URL(value) : new URL('https://altinget.dk/valg'),
    },
  })
  src = new URL('https://altinget.dk/valg');

  render() {
    return html`
      <iframe
        ${ref(this._iframeRef)}
        title="Altingets Kandidattest"
        scrolling="no"
        src=${this.src.toString()}
        frameborder="0"
      ></iframe>
    `;
  }
}