import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';

import * as domtools from '@designestate/dees-domtools';


import './dees-windowlayer';

declare global {
  interface HTMLElementTagNameMap {
    'dees-updater': DeesUpdater;
  }
}

@customElement('dees-updater')
export class DeesUpdater extends LitElement {
  public static demo = () => html`<dees-updater ></dees-updater>`;

  @property()
  currentVersion: string;

  @property()
  updatedVersion: string;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .modalContainer {
          will-change: transform;
          position: relative;
          background: #222;
          margin: auto;
          max-width: 800px;
          border-radius: 3px;
          border-top: 1px solid #333;
        }

        .headingContainer {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 40px 40px;
        }

        h1 {
          margin: none;
          font-size: 20px;
          color: #fff;
          margin-left: 20px;
          font-weight: normal;
        }

        .buttonContainer {
          display: grid;
          grid-template-columns: 50% 50%;
        }
      </style>
      <dees-windowlayer @clicked="${this.windowLayerClicked}">
        <div class="modalContainer">
          <div class="headingContainer">
            <dees-spinner .size=${60}></dees-spinner>
            <h1>Updating the application...</h1>
          </div>
          <div class="buttonContainer">
            <dees-button>More info</dees-button>
            <dees-button>Changelog</dees-button>
          </div>
        </div>
      </dees-windowlayer>>
    `;
  }

  private windowLayerClicked() {
    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
    windowLayer.toggleVisibility();
  }
}