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

export class LoginPage {
  readonly page: Page;
  readonly card: Locator;
  readonly form: Locator;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.card = page.locator('[data-testid="login-card"]');
    this.form = page.locator('[data-testid="login-form"]');
    this.usernameInput = page.locator('[data-testid="login-username"]');
    this.passwordInput = page.locator('[data-testid="login-password"]');
    this.submitButton = page.locator('[data-testid="login-submit"]');
    this.errorMessage = page.locator('[data-testid="login-error"]');
  }

  async goto() {
    await this.page.goto("/login");
    await this.card.waitFor({ state: "visible" });
  }

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  async getErrorMessage() {
    return this.errorMessage.textContent();
  }

  async hasErrorMessage() {
    return this.errorMessage.isVisible();
  }
}