import * as plugins from '../plugins.js';
import * as shared from '../elements/shared/index.js';

import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
} from '@design.estate/dees-element';

import * as appstate from '../appstate.js';

@customElement('cloudly-view-overview')
export class CloudlyViewOverview extends DeesElement {
  @state()
  private data: appstate.IDataState = {
    secretGroups: [],
    secretBundles: [],
  };

  constructor() {
    super();
    const subecription = appstate.dataState
      .select((stateArg) => stateArg)
      .subscribe((dataArg) => {
        this.data = dataArg;
      });
    this.rxSubscriptions.push(subecription);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
      .clusterGrid {
        display: grid;
        grid-template-columns: ${cssManager.cssGridColumns(3, 8)};
        grid-gap: 16px;
        margin-bottom: 40px;
      }
    `,
  ];

  public render() {
    return html`
      <cloudly-sectionheading>Overview</cloudly-sectionheading>
      ${this.data.clusters.length === 0 ? html`
        You need to create at least one cluster to see an overview.
      `: html``}
      ${this.data.clusters.map(
        (clusterArg) => html`
          <dees-label .label=${'cluster: ' + clusterArg.data.name}></dees-label>
          <div class="clusterGrid">
            <dees-chart-area .label=${'System Usage'}></dees-chart-area>
            <dees-chart-area .label=${'Internet Traffic'}></dees-chart-area>
            <dees-chart-area .label=${'Requests'}></dees-chart-area>
            <dees-chart-area .label=${'WebSocket Connections'}></dees-chart-area>
            <dees-chart-log class="services" .label=${'Deployed Services'}></dees-chart-log>
            <dees-chart-log class="eventLog" .label=${'Event Log'}></dees-chart-log>
          </div>
        `
      )}
    `;
  }
}