import { LitElement, html, css, property, customElement } from './plugins.js';
import type { CSSResult, TemplateResult } from './plugins.js';
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
import { SwDashTable } from './sw-dash-table.js';
import type { IColumnConfig } from './sw-dash-table.js';

export interface IContentTypeStats {
  contentType: string;
  totalResources: number;
  totalSize: number;
  totalHits: number;
  totalMisses: number;
  hitRate: number;
}

/**
 * Content types table view component
 */
@customElement('sw-dash-types')
export class SwDashTypes extends LitElement {
  public static styles: CSSResult[] = [
    sharedStyles,
    tableStyles,
    css`
      :host {
        display: block;
      }
    `
  ];

  @property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];

  private columns: IColumnConfig[] = [
    { key: 'contentType', label: 'Content Type' },
    { key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
    { key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
    { key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
    { key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
    { key: 'hitRate', label: 'Hit Rate' },
  ];

  public render(): TemplateResult {
    return html`
      <sw-dash-table
        .columns="${this.columns}"
        .data="${this.contentTypes}"
        filterPlaceholder="Filter types..."
        infoLabel="content types"
      ></sw-dash-table>
    `;
  }
}