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

import './internal/uplinternal-miniheading';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
  }
}

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

  constructor() {
    super();
  }

  public static styles = [
    plugins.domtools.elementBasic.staticStyles,
    css`
      :host {
        position: relative;
        padding: 0px 0px 15px 0px;
        display: block;
        background: #222222;
        font-family: Roboto Mono;
        color: #fff;
      }

      .mainbox {
        margin: auto;
        max-width: 900px;
        text-align: right;
        background: #404040;
        line-height: 50px;
        border-radius: 3px;
      }

      .mainbox .barContainer {
        position: relative;
        display: flex;
        padding: 6px;
        overflow: hidden;
      }

      .mainbox .barContainer .bar {
        margin: 4px;
        width: 11px;
        border-radius: 3px;
        height: 40px;
        background: #2deb51;
      }
      .timeIndicator {
        position: absolute;
        width: 11px;
        height: 11px;
        background: #FF9800;
        top: 56px;
        left: 400px;
        transform: rotate(45deg);
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
      <div class="mainbox">
        <div class="barContainer">
          ${(() => {
            let counter = 0;
            const returnArray: TemplateResult[] = [];
            while (counter < 48) {
              counter++;
              returnArray.push(html` <div class="bar"></div> `);
            }
            return returnArray;
          })()}
          <div class="timeIndicator"></div>
        </div>
      </div>
    `;
  }
}