import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'first-element': FirstElement;
  }
}

@customElement('first-element')
export class FirstElement extends DeesElement {
  public static demo = () => html`
    <first-element .aProp="${'test'}"></first-element>
  `;

  @property({
    type: String
  })
  public aProp: string = 'loading...';


  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        background: blue;
        color: white;
        padding: 10px;
        text-align: center;
      }
    `
  ]

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        ${this.aProp}
      </div>
    `;
  }
}