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

import './sz-stat-card.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-status-grid-cluster': SzStatusGridCluster;
  }
}

export interface IClusterStats {
  totalServices: number;
  running: number;
  stopped: number;
  dockerStatus: 'running' | 'stopped';
}

@customElement('sz-status-grid-cluster')
export class SzStatusGridCluster extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 900px;">
      <sz-status-grid-cluster
        .stats=${{
          totalServices: 7,
          running: 7,
          stopped: 0,
          dockerStatus: 'running',
        }}
      ></sz-status-grid-cluster>
    </div>
  `;

  public static demoGroups = ['Dashboard Grids'];

  @property({ type: Object })
  public accessor stats: IClusterStats = {
    totalServices: 0,
    running: 0,
    stopped: 0,
    dockerStatus: 'stopped',
  };

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

      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

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

  public render(): TemplateResult {
    return html`
      <div class="grid">
        <sz-stat-card
          label="Total Services"
          value="${this.stats.totalServices}"
          icon="server"
        ></sz-stat-card>
        <sz-stat-card
          label="Running"
          value="${this.stats.running}"
          icon="check"
          variant="success"
        ></sz-stat-card>
        <sz-stat-card
          label="Stopped"
          value="${this.stats.stopped}"
          icon="stop"
          variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
        ></sz-stat-card>
        <sz-stat-card
          label="Docker"
          value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
          icon="container"
          variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
          valueBadge
        ></sz-stat-card>
      </div>
    `;
  }
}