import { IFile } from "@api-client/core/build/browser.js";
import { html, TemplateResult } from "lit";
import type ApiClientScreen from "../ApiClient.screen.js";
import { FilesPage } from "./Files.page.js";

export class SharedPage extends FilesPage {
  constructor(screen: ApiClientScreen) {
    super(screen);
    this.dt.options.ariaLabel = 'Shared with you';
    this.fs.source = 'shared';
  }

  override render(): TemplateResult {
    return html`
    <div class="section-header">
      <h2 class="headline-small">Shared with you</h2>
      ${this.renderBreadcrumbs()}
    </div>
    ${this.renderFilesTable()}
    `;
  }

  protected override renderEmptyTable(): TemplateResult {
    return html`
    <p>You have no shared files.</p>
    <p>Files will appear here once someone share them with you.</p>
    `;
  }

  protected override renderTableHeader(): TemplateResult[] {
    const result: TemplateResult[] = [];
    result.push(this.dt.header('Name', { class: 'name-cell' }));
    result.push(this.dt.header('Owner', { class: 'owner-cell' }));
    result.push(this.dt.header('Updated', { class: 'updated-cell' }));
    return result;
  }

  protected override renderTableItem(item: IFile): TemplateResult[] {
    const result: TemplateResult[] = [];
    result.push(this.nameCell(item));
    result.push(this.ownerCell(item));
    result.push(this.updatedCell(item));
    return result;
  }
}
