import { type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IPaymentDetails } from 'safelite-playwright-core';
import { ITestData } from 'framework/TestData';
import { PaypalPage } from './PaypalPage';

export class PaymentAdyenPage extends BasePage {
    readonly page: Page;
    readonly creditOrDebitCardButton: Locator;
    readonly nameOnCardTextField: Locator;
    readonly cardNumberTextField: Locator;
    readonly expiryDateTextField: Locator;
    readonly cvvTextField: Locator;
    readonly countryDropDown: Locator;
    readonly billingAddressTextField: Locator;
    readonly cityTextField: Locator;
    readonly stateDropDown: Locator;
    readonly billingZipTextField: Locator;
    readonly submitPaymentButton: Locator;
    readonly payPalButton: Locator;
    readonly navigateToPaypalButton: Locator;
    readonly afterPayButton: Locator;
    readonly navigateToAfterPayButton: Locator;

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.creditOrDebitCardButton = page.locator('.adyen-checkout__payment-method--credit button');
        this.cardNumberTextField = page.frameLocator('iframe[title="Iframe for card number"]').locator('input[id*="adyen-checkout-encryptedCardNumber"]');
        this.expiryDateTextField = page.frameLocator('iframe[title="Iframe for expiry date"]').locator('input[id*="adyen-checkout-encryptedExpiryDate"]');   
        this.cvvTextField = page.frameLocator('iframe[title="Iframe for security code"]').locator('input[id*="adyen-checkout-encryptedSecurityCode"]');
        this.nameOnCardTextField = page .locator('input[id*="adyen-checkout-holderName"]');
        this.countryDropDown = page.locator('input[id*="adyen-checkout-country"]');
        this.billingAddressTextField = page.locator('input[id*="adyen-checkout-street"]');
        this.cityTextField = page.locator('input[id*="adyen-checkout-city"]');
        this.stateDropDown = page.locator('input[id*="adyen-checkout-stateOrProvince"]');
        this.billingZipTextField = page.locator('input[id*="adyen-checkout-postalCode"]');
        this.submitPaymentButton = page.locator('button.adyen-checkout__button');
        this.payPalButton = page.locator('button[id*="button-paypal"]');
        this.navigateToPaypalButton = page.frameLocator('iframe[title="PayPal-paypal"]:first-of-type').locator('div[role="link"][class*="paypal-button"]');
        this.afterPayButton = page.locator('button[id*="button-redirect"]');
        this.navigateToAfterPayButton = page.locator('div.adyen-checkout__payment-method--afterpaytouch_US  button.adyen-checkout__button');

    }

    async populateAdyenCreditCardDetails(testData: Partial<ITestData>){
        const { paymentDetails, customerDetails } = testData;

        paymentDetails!.cardNumber = '5100 0600 0000 0002';
        paymentDetails!.expirationMonth = "12 - December";
        paymentDetails!.expirationYear = "2029";
        paymentDetails!.cvv = "737";
        
        await this.creditOrDebitCardButton.click();
        await this.cardNumberTextField.fill(paymentDetails!.cardNumber || '');

        const expirationDate = `${(paymentDetails!.expirationMonth!.split(' ')[0] || '').padStart(2, '0')} + ${paymentDetails!.expirationYear!.toString().slice(-2)}`;
        await this.expiryDateTextField.pressSequentially(expirationDate);
        
        await this.cvvTextField.fill(paymentDetails!.cvv!);
        await this.nameOnCardTextField.fill(customerDetails!.firstName! + ' ' + customerDetails!.lastName!);
        await this.billingAddressTextField.fill(paymentDetails!.billingAddress!.street);
        await this.countryDropDown.pressSequentially("United States");
        await this.countryDropDown.click();
        await this.page.getByRole('option', { name: 'United States', exact: true }).click();

        await this.cityTextField.fill(paymentDetails!.billingAddress!.city);
        await this.stateDropDown.pressSequentially(paymentDetails!.billingAddress!.state);
        await this.stateDropDown.click();
        await this.page.locator(".adyen-checkout__field--stateOrProvince li").nth(0).click();
        await this.billingZipTextField.fill(paymentDetails!.billingAddress!.postalCode);
        await this.submitPaymentButton.click();
    }

    async navigateToAdyenPaypalCheckout(): Promise<PaypalPage> {
        await this.payPalButton.click();
        const paypalPage = this.page.waitForEvent('popup');
        await this.navigateToPaypalButton.click();
        return new PaypalPage(await paypalPage);
    }
}