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

export class PaymentPage extends BasePage {
    readonly page: Page;
    readonly cardNumberTextField: Locator;
    readonly expirationMonthDropDown: Locator;
    readonly expirationYearDropDown: Locator;
    readonly cvvTextField: Locator;
    readonly billingAddressTextField: Locator;
    readonly cityTextField: Locator;
    readonly stateDropDown: Locator;
    readonly billingZipTextField: Locator;
    readonly submitPaymentButton: Locator;
    issPageValue = 'payment-page';

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.cardNumberTextField = page.frameLocator('iframe[name="card-frame"]').getByLabel('Card number*');
        this.expirationMonthDropDown = page.frameLocator('iframe[name="card-frame"]').getByRole('combobox', { name: 'Expiration month' });
        this.expirationYearDropDown = page.frameLocator('iframe[name="card-frame"]').getByRole('combobox', { name: 'Expiration year' });
        this.cvvTextField = page.frameLocator('iframe[name="card-frame"]').getByRole('textbox', { name: 'CVV' });
        this.billingAddressTextField = page.frameLocator('iframe[name="card-frame"]').getByRole('textbox', { name: 'Billing address' });
        this.cityTextField = page.frameLocator('iframe[name="card-frame"]').getByRole('textbox', { name: 'City' });
        this.stateDropDown = page.frameLocator('iframe[name="card-frame"]').getByRole('combobox', { name: 'State' });
        this.billingZipTextField = page.frameLocator('iframe[name="card-frame"]').getByRole('textbox', { name: 'Billing ZIP code' });;
        this.submitPaymentButton = page.getByRole('button', { name: 'Submit payment' });
    }

    async populateCreditCardDetails(paymentDetails: IPaymentDetails){
        await this.cardNumberTextField.fill(paymentDetails.cardNumber || '');
        await this.expirationMonthDropDown.selectOption(paymentDetails.expirationMonth!);
        await this.expirationYearDropDown.selectOption(paymentDetails.expirationYear!);
        await this.cvvTextField.fill(paymentDetails.cvv!);
        await this.billingAddressTextField.fill(paymentDetails.billingAddress!.street);
        await this.cityTextField.fill(paymentDetails.billingAddress!.city);
        await this.stateDropDown.selectOption(paymentDetails.billingAddress!.state);
        await this.billingZipTextField.fill(paymentDetails.billingAddress!.postalCode);
        await this.submitPaymentButton.click();
    }

}