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

import './sz-dns-ssl-card.js';
import './sz-quick-actions-card.js';

import type { IQuickAction } from './sz-quick-actions-card.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-status-grid-infra': SzStatusGridInfra;
  }
}

@customElement('sz-status-grid-infra')
export class SzStatusGridInfra extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-status-grid-infra
        dnsConfigured
        acmeConfigured
        .actions=${[
          { label: 'Deploy Service', icon: 'plus', primary: true },
          { label: 'View All Services' },
          { label: 'Platform Services' },
          { label: 'Manage Domains' },
        ]}
      ></sz-status-grid-infra>
    </div>
  `;

  public static demoGroups = ['Dashboard Grids'];

  @property({ type: Boolean })
  public accessor dnsConfigured: boolean = false;

  @property({ type: Boolean })
  public accessor acmeConfigured: boolean = false;

  @property({ type: Array })
  public accessor actions: IQuickAction[] = [];

  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 2fr;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="grid">
        <sz-dns-ssl-card
          ?dnsConfigured=${this.dnsConfigured}
          ?acmeConfigured=${this.acmeConfigured}
        ></sz-dns-ssl-card>
        <sz-quick-actions-card
          .actions=${this.actions}
          @action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
        ></sz-quick-actions-card>
      </div>
    `;
  }
}