import { demoFunc } from './dees-simple-appdash.demo.js';
import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  type CSSResult,
  state,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-simple-appdash': DeesSimpleAppDash;
  }
}

@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
  // STATIC
  public static demo = demoFunc;
  // INSTANCE

  @property()
  public title = 'Dees Simple Login';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#fff')};
        user-select: none;
      }
      .appbar {
        position: absolute;
        top: 0;
        height: 40px;
        width: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
        font-size: 14px;
        line-height: 40px;
        font-family: 'Hubot Sans', 'Inter', sans-serif;
        padding: 0px 16px;
      }
      .appcontent {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="appbar">
        configvault v1.2.3
      </div>
      <div class="appcontent">
        <slot></slot>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
  }
}