import { LitElement, html, css } from 'lit-element';
import { overlays } from 'overlays/instance.js';

export class PageB extends LitElement {
  getInstance(sym, fallback) {
    const ev = new CustomEvent('request-instance', {
      detail: { key: sym },
      bubbles: true,
      cancelable: true,
      composed: true,
    });
    this.dispatchEvent(ev);
    return ev.detail.instance || fallback();
  }

  connectedCallback() {
    super.connectedCallback();
  }

  static get styles() {
    return css`
      :host {
        display: block;
        padding: 10px;
        border: 2px solid #ccc;
      }
    `;
  }

  render() {
    return html`
      <h3>I am page B</h3>
      <p>Overlays Status:</p>
      <p>Name: ${overlays.name}</p>
      <p>Blocked: ${overlays._blockBody}</p>
      <button @click=${() => {
        overlays.blockBody(); this.requestUpdate();
      }}>block</button>
      <button @click=${() => {
        overlays.unBlockBody(); this.requestUpdate();
      }}>un-block</button>
      <button @click=${() => {
        this.requestUpdate();
      }}>refresh</button>
    `;
  }
}

customElements.define('page-b', PageB);