import { Locator, Page } from "@playwright/test";
import { BasePage } from "./BasePage";
import { IPaymentDetails } from "@business-logic/types/CustomerDetails";

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

    // Login
    readonly passwordTextBox: Locator;

    // Card details
    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.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', { name: '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.populateCardDetails(paymentDetails);
        
        await this.confirmButton.click();
    }


}