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

@customElement('uptimelink-webwidget')
export class UptimelinkWebwidget extends DeesElement {
  public static demo = () => html`
    <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
  `;

  @property()
  public projectSlug: string;

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

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          display: block;
        }
        .mainbox {
          line-height: 1em;
          margin: auto;
          display: grid;
          grid-template-columns: 26px auto;
          font-family: Roboto;
          font-weight: 400;
          font-size: 13px;
          box-sizing: border-box;
          width: 150px;
          border-radius: 20px;
          height: 30px;
          background: ${this.goBright ? '#fff' : '#222' };
          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
          padding: 5px;
          color: ${this.goBright ? '#333' : '#CCC' };
          cursor: pointer;
        }
        .statusindicator {
          height: 20px;
          width: 20px;
          background:  #66BB6A;
          border-radius: 10px;
        }
        .statustext {
          padding-top: 3px;
        }
      </style>
      <div class="mainbox">
        <div class="statusindicator"></div>
        <div class="statustext">All systems are up!</div>
      </div>
    `;
  }
}