import { DeesElement, customElement, html, css, cssManager, property, type TemplateResult } from '../plugins.js';
import type { IDeviceStatus } from '../state/appstate.js';

@customElement('sipproxy-devices')
export class SipproxyDevices extends DeesElement {
  @property({ type: Array }) accessor devices: IDeviceStatus[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host { display: block; margin-bottom: 1.5rem; }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <dees-table
        heading1="Devices"
        heading2="${this.devices.length} registered"
        dataName="devices"
        .data=${this.devices}
        .rowKey=${'id'}
        highlight-updates="flash"
        .searchable=${false}
        .columns=${[
          {
            key: 'displayName',
            header: 'Device',
            sortable: true,
          },
          {
            key: 'status',
            header: 'Status',
            value: (row: any) => (row.connected ? 'Connected' : 'Disconnected'),
            renderer: (val: string, row: any) => {
              const on = row.connected;
              return html`
                <span style="display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;${on ? 'background:#4ade80;box-shadow:0 0 6px #4ade80' : 'background:#f87171;box-shadow:0 0 6px #f87171'}"></span>
                <span style="color:${on ? '#4ade80' : '#f87171'}">${val}</span>
              `;
            },
          },
          {
            key: 'contact',
            header: 'Contact',
            renderer: (_val: any, row: any) => {
              const c = row.contact;
              const text = c ? (c.port ? `${c.address}:${c.port}` : c.address) : '--';
              return html`<span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${text}</span>`;
            },
          },
        ]}
      ></dees-table>
    `;
  }
}