import type { Page } from "@playwright/test";

export class AuditEntryDetailPage {
  private page: Page;
  constructor(page: Page) {
    this.page = page;
  }

  async goto(id: string) {
    await this.page.goto(`/audit/${id}`);
  }

  get heading() {
    return this.page.getByRole("heading", { name: /audit entry detail/i });
  }

  /** Return the container <div> that holds both the label and value for a DescriptionCard field. */
  private descriptionField(label: RegExp) {
    return this.page
      .locator("div")
      .filter({ has: this.page.getByText(label) })
      .first();
  }

  get eventIdField() {
    return this.descriptionField(/event id/i);
  }

  get timestampField() {
    return this.descriptionField(/timestamp/i);
  }

  get operationTypeField() {
    return this.descriptionField(/operation type/i);
  }

  get entityTypeField() {
    return this.descriptionField(/entity type/i);
  }

  get entityIdField() {
    return this.descriptionField(/entity id/i);
  }

  get actorTypeField() {
    return this.descriptionField(/actor type/i);
  }

  get actorIdField() {
    return this.descriptionField(/actor id/i);
  }

  get changeDetails() {
    return this.page.getByText(/change details/i).first();
  }

  get backButton() {
    return this.page.getByRole("link", { name: /back/i });
  }
}
