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 loginWithPasswordButton: Locator;
    readonly usernameTextBox: Locator;
    readonly nextButton: Locator;
    readonly usePasswordInsteadButton: Locator;
    readonly passwordTextBox: Locator;
    readonly paypalLoginButton: Locator;
    readonly completePurchaseButton: Locator;

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.usernameTextBox = page.getByPlaceholder('Email');
        this.nextButton = page.getByRole('button', { name: 'Next' });
        this.loginWithPasswordButton = page.getByRole('button', { name: 'Use Password Instead' });
        this.passwordTextBox = page.getByPlaceholder('Password');
        this.paypalLoginButton = page.getByRole('button', { name: 'Log In', exact: true });
        this.completePurchaseButton = page.getByRole('button', { name: 'Pay $' });
    }

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