import { expect } from "@playwright/test"

export class PaymentPage {

    constructor(page) {
        this.page = page

        // Discount
        this.discountField = page.getByPlaceholder('Discount code')
        this.discountCode = page
                            .frameLocator('[data-qa="active-discount-container"]')
                            .locator('[data-qa="discount-code"]')
        this.applyDiscount = page.getByRole('button', { name: 'Submit discount' })
        this.priceTotal = page.locator('[data-qa="total-value"]')
        this.discountTotal = page.locator('[data-qa="total-with-discount-value"]')
        this.discountText = page.locator('[data-qa="discount-active-message"]')

        // Card 
        this.cardOwner = page.locator('[data-qa="credit-card-owner"]')
        this.cardNumber = page.locator('[data-qa="credit-card-number"]')
        this.cardDate = page.locator('[data-qa="valid-until"]')
        this.cardCVC = page.locator('[data-qa="credit-card-cvc"]')  

        // Pay  
        this.payButton = page.getByRole('button', { name: 'Pay' })

    }
    
    activateDiscount = async () => {
        await this.discountCode.waitFor() 
        const code = await this.discountCode.innerText()
        await this.discountField.waitFor()
        //await this.discountText.waitFor()
        
        expect (await this.discountTotal.isVisible()).toBe(false)
        expect (await this.discountText.isVisible()).toBe(false)

        // 1. Using .full with await expect() due to laggy input
        // await this.discountField.fill(code)
        // expect (this.discountField).toHaveValue(code)

        // 2. Using page.keyboard.type to manually enter in code / simulate real world
        await this.discountField.focus()
        await this.page.keyboard.type(code, {delay: 500})
        expect (await this.discountField.inputValue()).toBe(code)
        
        await this.priceTotal.waitFor()
        const totalValueText = await this.priceTotal.innerText()
        const totalNumber = totalValueText.replace("$","")
        const totalValue = parseInt(totalNumber, 10)

        await this.applyDiscount.waitFor()
        await this.applyDiscount.click()

        await this.discountTotal.waitFor()
        const discountValueText = await this.discountTotal.innerText()
        const discountNumber = discountValueText.replace("$","")
        const discountValue = parseInt(discountNumber, 10)

        expect(discountValue).toBeLessThan(totalValue)

    }

    fillPaymentDetails = async (paymentDetails) => {
        await this.cardOwner.waitFor()
        await this.cardOwner.fill(paymentDetails.owner)
        await this.cardNumber.waitFor()
        await this.cardNumber.fill(paymentDetails.number)
        await this.cardDate.waitFor()
        await this.cardDate.fill(paymentDetails.date)
        await this.cardCVC.waitFor()
        await this.cardCVC.fill(paymentDetails.cvc)
    }

    completePayment = async () => {
        await this.payButton.waitFor()
        await this.payButton.click()
        await this.page.waitForURL(/\/thank-you/, {timeout: 3000})
    }
}