import { Locator, Page } from "@playwright/test";
import { BasePage } from "./BasePage";
import { IPaymentDetails } from 'safelite-playwright-core';

export class AfterpayPage extends BasePage {
    readonly page: Page;
    readonly submitButton: Locator;

    // Login
    readonly passwordTextBox: Locator;

    // Card details
    readonly paymentOptionsButton: Locator;
    readonly continueButtonAfterpay: Locator;
    readonly cardholderNameTextBox: Locator;
    readonly cardNumberTextBox: Locator;
    readonly expirationDateTextBox: Locator;
    readonly cvvTextBox: Locator;

    readonly confirmButton: Locator;

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.passwordTextBox = page.getByTestId('login-password-input');
        this.submitButton = page.getByRole('button', { name: 'Continue' });

        this.paymentOptionsButton = page.locator('div:has(>input[id*=\'payment-types\']) label').nth(1);
        this.continueButtonAfterpay = page.getByRole('button').filter({hasText: 'Continue'});
        this.cardholderNameTextBox = page.getByTestId('payment-method-cardHolderName-input');
        this.cardNumberTextBox = page.getByTestId('payment-method-cardNumber-input');
        this.expirationDateTextBox = page.getByTestId('payment-method-cardExpiry-input');
        this.cvvTextBox = page.getByTestId('payment-method-cardCvv-input');

        this.confirmButton = page.getByRole('button').filter({hasText: 'Confirm'});
    }

    async login(password: string) {
        await this.passwordTextBox.fill(password);
        await this.submitButton.click();
    }

    async populateCardDetails(paymentDetails: IPaymentDetails) {
        await this.cardholderNameTextBox.fill('Roberts');    // TODO: Add cardholder name field
        await this.cardNumberTextBox.fill(paymentDetails.cardNumber!);
        await this.expirationDateTextBox.fill(`${paymentDetails.expirationMonth}/${paymentDetails.expirationYear}`);
        await this.cvvTextBox.fill(paymentDetails.cvv!);
        await this.submitButton.click();
    }

    async executeAfterpayPayment(paymentDetails: IPaymentDetails) {
        await this.login(paymentDetails.password!);
        await this.page.locator('div[data-testid=\'loading-icon-svg\']').filter({ visible: true}).first().waitFor({ state: 'hidden' });
        if  (await this.paymentOptionsButton.isVisible())
        {
            await this.paymentOptionsButton.click();
            await this.continueButtonAfterpay.click();
        }
        await this.confirmButton.click();
    }


}