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

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-footer': UplStatuspageFooter;
  }
}

@customElement('upl-statuspage-footer')
export class UplStatuspageFooter extends DeesElement {
  // STATIC
  public static demo = () => html`
    <upl-statuspage-footer></upl-statuspage-footer>
  `;

  // INSTANCE
  @property()
  public legalInfo: string = "https://lossless.gmbh";

  @property({
    type: Boolean
  })
  public whitelabel = false;
  

  constructor() {
    super();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
          display: block;
          background: ${cssManager.bdTheme('#ffffff', '#000000')};
          font-family: Roboto Mono;
          color: ${cssManager.bdTheme('#333333', '#ffffff')};
        }

        .mainbox {
          max-width: 900px;
          margin: auto;
          padding-top: 20px;
          padding-bottom: 20px;
        }
        
    `
  ]

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style></style>
      <div class="mainbox">
        Hi there
      </div>
    `;
  }

  public dispatchReportNewIncident() {
    this.dispatchEvent(new CustomEvent('reportNewIncident', {
      
    }))
  }

  public dispatchStatusSubscribe() {
    this.dispatchEvent(new CustomEvent('statusSubscribe', {
      
    }))
  }
}