import type { Page, Locator } from '@playwright/test';

export class Lightbox {
  readonly page: Page;
  readonly closeButton: Locator;
  readonly nextButton: Locator;
  readonly prevButton: Locator;
  readonly likeButton: Locator;
  readonly likeCount: Locator;
  readonly commentInput: Locator;
  readonly commentSubmit: Locator;
  readonly commentsList: Locator;

  constructor(page: Page) {
    this.page = page;
    this.closeButton = page.getByRole('button', { name: /schließen|close/i });
    this.nextButton = page.getByRole('button', { name: /nächst|next/i });
    this.prevButton = page.getByRole('button', { name: /vorherig|previous/i });
    this.likeButton = page.getByRole('button', { name: /gefällt|like|heart/i }).first();
    this.likeCount = page.locator('[data-testid="like-count"]').first();
    this.commentInput = page.getByPlaceholder(/kommentar|comment/i);
    this.commentSubmit = page.getByRole('button', { name: /senden|send|post/i }).first();
    this.commentsList = page.locator('[data-testid="comments-list"]');
  }

  async close() {
    await this.closeButton.click();
  }

  async like() {
    await this.likeButton.click();
  }

  async addComment(text: string) {
    await this.commentInput.fill(text);
    await this.commentSubmit.click();
  }

  /** Swipe gesture support for mobile spec. */
  async swipeLeft() {
    const box = await this.page.locator('body').boundingBox();
    if (!box) return;
    const y = box.y + box.height / 2;
    await this.page.mouse.move(box.x + box.width * 0.8, y);
    await this.page.mouse.down();
    await this.page.mouse.move(box.x + box.width * 0.2, y, { steps: 10 });
    await this.page.mouse.up();
  }
}