import { expect, type Locator, type Page } from "@playwright/test";
import { BasePage } from "./BasePage";
import { IPaymentDetailsAdyen } 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.getByRole("textbox", { name: "Email or mobile number" });
    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 $" });
   this.payButton = page.getByRole("button", { exact: true, name: "Pay" });
  }

  async completePaypalPurchase(paymentDetailsAdyen: IPaymentDetailsAdyen) {

    await expect(async () => {
      await this.usernameTextBox.fill(paymentDetailsAdyen.username!);
      await this.nextButton.waitFor({ state: 'visible', timeout: 5000 });
      await this.nextButton.click();
      await expect(this.passwordTextBox).toBeVisible({ timeout: 5000 });
  }).toPass({ timeout: 30000 });

    await this.passwordTextBox.fill(paymentDetailsAdyen.password!);
    await this.paypalLoginButton.click();
    await this.payButton.click();
  }
}