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

export class PaymentAdyenPage extends BasePage {
    readonly page: Page;

    readonly cardNumberTextField: Locator;
    readonly expiryDateTextField: Locator;
    readonly securityCodeTextField: Locator;
    readonly billingAddressTextField: Locator;
    readonly cityTextField: Locator;
    readonly stateDropDown: Locator;
    readonly payButton: Locator;

    readonly afterPayButton: Locator;
    readonly afterPayLaunchButton: Locator;
    readonly applePayButton: Locator;

    issPageValue = 'payment-page-adyen';

    constructor(page: Page) {
        super(page);
        this.page = page;

        //Credit Card Fields
        this.cardNumberTextField = this.page.locator('iframe[title="Iframe for card number"]').contentFrame().getByRole('textbox', { name: 'Card number' });
        this.expiryDateTextField = this.page.locator('iframe[title="Iframe for expiry date"]').contentFrame().getByRole('textbox', { name: 'Expiry date' });
        this.securityCodeTextField = this.page.locator('iframe[title="Iframe for security code"]').contentFrame().getByRole('textbox', { name: 'CVV/CVC' });
        this.billingAddressTextField = this.page.getByRole('textbox', { name: 'Address' });
        this.cityTextField = this.page.getByRole('textbox', { name: 'City' });
        this.stateDropDown = this.page.getByRole('combobox', { name: 'State' });
        this.payButton = this.page.getByRole('button', { name: 'Pay $' });
    }

    async populateCreditCardDetails(paymentDetailsAdyen: IPaymentDetailsAdyen){
        await this.cardNumberTextField.fill(paymentDetailsAdyen.cardNumber!);
        await this.expiryDateTextField.fill(paymentDetailsAdyen.expirationDate!);
        await this.securityCodeTextField.fill(paymentDetailsAdyen.cvv!);
        await this.billingAddressTextField.fill(paymentDetailsAdyen.billingAddress!.street);
        await this.cityTextField.fill(paymentDetailsAdyen.billingAddress!.city);
        await this.stateDropDown.fill(paymentDetailsAdyen.billingAddress!.state);
        await this.stateDropDown.press('Enter');
    }

}