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

export class ReadyPage {
  readonly heading: Locator;
  readonly status: Locator;
  readonly resetButton: Locator;

  constructor(private readonly page: Page) {
    this.heading = page.getByRole('heading', { name: 'Playwright fixture ready' });
    this.status = page.getByTestId('status');
    this.resetButton = page.getByRole('button', { name: 'Reset status' });
  }

  async open() {
    await this.page.setContent(`
      <main>
        <h1>Playwright fixture ready</h1>
        <p data-testid="status">Ready</p>
        <button type="button">Reset status</button>
      </main>
      <script>
        document.querySelector('button')?.addEventListener('click', () => {
          document.querySelector('[data-testid="status"]').textContent = 'Reset';
        });
      </script>
    `);
  }

  async expectReady() {
    await expect(this.heading).toBeVisible();
    await expect(this.status).toHaveText('Ready');
  }

  async resetStatus() {
    await this.resetButton.click();
  }

  async expectReset() {
    await expect(this.status).toHaveText('Reset');
  }
}