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

import * as domtools from '@designestate/dees-domtools';

@customElement('deap-activitylog')
export class DeapActivitylog extends DeesElement {
  // STATIC
  public static demo = () => html`<deap-activitylog></deap-activitylog>`;

  // INSTANCE
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: #fff;
        position: relative;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 100%;
        background: #343b43;
      }
      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
      }

      .topbar {
        position: absolute;
        height: 80px;
        width: calc(100% - 20px);
        margin: 0px 10px 0px 10px;
        border-bottom: 1px solid #707070;
      }

      .topbar .heading {
        text-align: center;
        line-height: 80px;
        font-family: Roboto Mono;
        font-size: 14px;
      }

      .activityContainer {
        position: absolute;
        top: 80px;
        bottom: 0px;
        width: 100%;
        padding: 10px;
      }

      .activityentry {
        background: rgba(0, 0, 0, 0.2);
        min-height: 30px;
        border-radius: 3px;
        cursor: pointer;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Activity Log</div>
        </div>
        <div class="activityContainer">
          <div class="activityentry"></div>
        </div>
      </div>
    `;
  }
}