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

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-incidents': UplStatuspageIncidents;
  }
}

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

  // INSTANCE
  @property({
    type: Array,
  })
  public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];

  @property({
    type: Array,
  })
  public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];

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

  constructor() {
    super();
  }

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

      .mainbox {
        max-width: 900px;
        margin: auto;
      }

      .noIncidentBox {
        background: #333;
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 3px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="mainbox">
        <uplinternal-miniheading> Current Incidents </uplinternal-miniheading>
        ${this.currentIncidences.length
          ? html``
          : html` <div class="noIncidentBox">No incidents ongoing.</div> `}
        <uplinternal-miniheading> Past Incidents </uplinternal-miniheading>
        ${this.pastIncidences.length
          ? html``
          : html` <div class="noIncidentBox">No past incidents in the last 90 days.</div> `}
      </div>
    `;
  }

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

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