import {
  customElement,
  DeesElement,
  type TemplateResult,
  html,
  property,
  type CSSResult,
  domtools,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-updater.demo.js';

import './dees-windowlayer';
import { css, cssManager } from '@design.estate/dees-element';

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

@customElement('dees-updater')
export class DeesUpdater extends DeesElement {
  public static demo = demoFunc;

  public static async createAndShow() {
    const updater = new DeesUpdater();
    document.body.appendChild(updater);
    return updater;
  }

  @property({
    type: String,
  })
  currentVersion: string;

  @property({
    type: String,
  })
  updatedVersion: string;

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      .modalContainer {
        will-change: transform;
        position: relative;
        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
        max-width: 800px;
        border-radius: 8px;
        border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
      }

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

      h1 {
        margin: none;
        font-size: 20px;
        color: ${cssManager.bdTheme('#333', '#fff')};
        margin-left: 20px;
        font-weight: normal;
      }

      .buttonContainer {
        display: grid;
        grid-template-columns: 50% 50%;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <dees-windowlayer
        @clicked="${this.windowLayerClicked}"
        .options=${{
          blur: true,
        }}
      >
        <div class="modalContainer">
          <div class="headingContainer">
            <dees-spinner .size=${60}></dees-spinner>
            <h1>Updating the application...</h1>
          </div>
          <div class="progress">
            <dees-progressbar .progress=${0.5}></dees-progressbar>
          </div>
          <div class="buttonContainer">
            <dees-button>More info</dees-button>
            <dees-button>Changelog</dees-button>
          </div>
        </div> </dees-windowlayer
      >>
    `;
  }

  public async destroy() {
    this.parentElement.removeChild(this);
  }

  private windowLayerClicked() {}
}