import { expect, type Locator, type Page } from "@playwright/test";
import { BasePage } from "./BasePage";
import { IPaymentDetails } from "@business-logic/types/CustomerDetails";

export class PaypalPage extends BasePage {
  readonly page: Page;
  readonly usernameTextBox: Locator;
  readonly nextButton: Locator;
  readonly passwordTextBox: Locator;
  readonly paypalLoginButton: Locator;
  readonly payButton: Locator;

  constructor(page: Page) {
    super(page);
    this.page = page;
    this.usernameTextBox = page.locator("#email");
    this.nextButton = page.getByRole("button", { name: "Next" });
    this.passwordTextBox = page.getByRole("textbox", { name: "Password" });
    this.paypalLoginButton = page.getByRole("button", {
      name: "Log In",
      exact: true,
    });
    this.payButton = page.getByRole("button", { name: "Pay $" });
  }

  async completePaypalPurchase(paymentDetails: IPaymentDetails) {
    await this.usernameTextBox.fill(paymentDetails.username!);
    await this.nextButton.click();
    await this.passwordTextBox.fill(paymentDetails.password!);
    await this.paypalLoginButton.click();
    await this.payButton.click();
  }
}