import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import { DatePipe } from '@angular/common';
import { JtGridCellDirective, JtGridColumn, JtGridComponent } from '@jambotron/aria-grid';
import { makeServers, Server } from '../data/servers';
import { text } from '../i18n/labels';
import { CodeComponent } from './code';

/** Example 1: columns, cell templates, sorting, paging, filtering and the empty state. */
@Component({
  selector: 'demo-basic-example',
  imports: [JtGridComponent, JtGridCellDirective, DatePipe, CodeComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <label class="filter">
      <span>Filter</span>
      <input type="search" placeholder="name, region or owner" [value]="filter()" (input)="filter.set($any($event.target).value)" />
    </label>

    <jt-grid [rows]="rows()" [columns]="columns()" [trackBy]="byId" [label]="t().servers"
             [initialSort]="{ key: 'name', direction: 'asc' }" [pageSize]="10" [emptyMessage]="t().nothing">
      <ng-template jtGridCell="status" let-row>
        <span class="chip chip--{{ row.status }}">{{ statusText(row.status) }}</span>
      </ng-template>
      <ng-template jtGridCell="cpu" let-row>
        <span class="meter" [style.--value]="row.cpu"><span>{{ row.cpu }}%</span></span>
      </ng-template>
      <ng-template jtGridCell="memoryGb" let-row>{{ row.memoryGb }} GB</ng-template>
      <ng-template jtGridCell="created" let-row>{{ row.created | date: 'mediumDate' }}</ng-template>
    </jt-grid>

    <demo-code [code]="code" />
  `
})
export class BasicExampleComponent {
  protected readonly t = text;
  protected readonly statusText = (s: Server['status']) => this.t()[s];
  private readonly all = makeServers();
  protected readonly filter = signal('');

  // rows is a plain input: filter the array yourself, the grid keeps the page and the sort
  protected readonly rows = computed(() => {
    const q = this.filter().trim().toLowerCase();
    return q ? this.all.filter(s => [s.name, s.region, s.owner].some(v => v.includes(q))) : this.all;
  });

  // computed — so the column titles follow the language switch
  protected readonly columns = computed<JtGridColumn<Server>[]>(() => {
    const t = this.t();
    return [
      { key: 'name', label: t.name, sort: s => s.name },
      { key: 'region', label: t.region, sort: s => s.region },
      { key: 'status', label: t.status, sort: s => s.status },
      { key: 'cpu', label: t.cpu, sort: s => s.cpu, align: 'end' },
      { key: 'memoryGb', label: t.memory, sort: s => s.memoryGb, align: 'end' },
      { key: 'created', label: t.created, sort: s => s.created },
      { key: 'owner', label: t.owner }   // no sort — the header is not a button
    ];
  });

  protected readonly byId = (s: Server) => s.id;

  protected readonly code = `columns: JtGridColumn<Server>[] = [
  { key: 'name',     label: 'Name',    sort: s => s.name },
  { key: 'status',   label: 'Status',  sort: s => s.status },
  { key: 'cpu',      label: 'CPU',     sort: s => s.cpu, align: 'end' },
  { key: 'created',  label: 'Created', sort: s => s.created },
  { key: 'owner',    label: 'Owner' }            // not sortable
];
byId = (s: Server) => s.id;

<jt-grid [rows]="rows()" [columns]="columns" [trackBy]="byId" label="Servers"
         [initialSort]="{ key: 'name', direction: 'asc' }" [pageSize]="10"
         emptyMessage="No servers match the filter.">
  <ng-template jtGridCell="status" let-row>
    <span class="chip chip--{{ row.status }}">{{ row.status }}</span>
  </ng-template>
  <ng-template jtGridCell="created" let-row>{{ row.created | date }}</ng-template>
  <!-- no template for "name" and "owner": the grid prints row[key] -->
</jt-grid>`;
}