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

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

  render() {
    return html`
      <h3>I am page A</h3>
      <p>Overlays Status:</p>
      <p>Name: ${overlays.name}</p>
      <p>Blocked: ${overlays.blockBody}</p>
      <button @click=${() => {
        overlays.block(); this.requestUpdate();
      }}>block</button>
      <button @click=${() => {
        overlays.unBlock(); this.requestUpdate();
      }}>un-block</button>
      <button @click=${() => {
        this.requestUpdate();
      }}>refresh</button>
    `;
  }
}
customElements.define('page-e', PageE);