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 {
          background: #333333;
          margin: auto;
          height: 200px;
          width: 800px;
          margin-top: 80px;
          border-radius: 10px;
        }
      </style>
      <dees-windowlayer>
        <div class="modalContainer"></div>
      </dees-windowlayer>>
    `;
  }
}