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

import './sz-resource-usage-card.js';
import './sz-platform-services-card.js';

import type { IResourceUsage } from './sz-resource-usage-card.js';
import type { IPlatformService } from './sz-platform-services-card.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-status-grid-services': SzStatusGridServices;
  }
}

@customElement('sz-status-grid-services')
export class SzStatusGridServices extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-status-grid-services
        .resourceUsage=${{
          cpu: 45,
          memoryUsed: '4.96 GB',
          memoryTotal: '8 GB',
          networkIn: '1.2 MB/s',
          networkOut: '0.8 MB/s',
          topConsumers: [
            { name: 'api-service', memory: '512 MB' },
            { name: 'web-frontend', memory: '256 MB' },
            { name: 'worker', memory: '128 MB' },
          ],
        }}
        .platformServices=${[
          { name: 'MongoDB', status: '1 DB', running: true },
          { name: 'S3 Storage', status: '1 bucket', running: true },
          { name: 'ClickHouse', status: 'Stopped', running: false },
          { name: 'Redis Cache', status: 'Running', running: true },
        ]}
      ></sz-status-grid-services>
    </div>
  `;

  public static demoGroups = ['Dashboard Grids'];

  @property({ type: Object })
  public accessor resourceUsage: IResourceUsage = {
    cpu: 0,
    memoryUsed: '0 GB',
    memoryTotal: '0 GB',
    networkIn: '0 MB/s',
    networkOut: '0 MB/s',
    topConsumers: [],
  };

  @property({ type: Array })
  public accessor platformServices: IPlatformService[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="grid">
        <sz-resource-usage-card
          .usage=${this.resourceUsage}
        ></sz-resource-usage-card>
        <sz-platform-services-card
          .services=${this.platformServices}
        ></sz-platform-services-card>
      </div>
    `;
  }
}