import { expect } from "@playwright/test"

export class DeliveryPage {

    constructor(page) {
        this.page = page

        this.firstNameField = page.locator('[data-qa="delivery-first-name"]')
        this.lastNameField = page.locator('[data-qa="delivery-last-name"]')
        this.addressField = page.locator('[data-qa="delivery-address-street"]')
        this.postcodeField = page.locator('[data-qa="delivery-postcode"]')
        this.cityField = page.locator('[data-qa="delivery-city"]')
        this.countryDropdown = page.locator('[data-qa="country-dropdown"]')

        this.paymentButton = page.getByRole('button', { name: 'Continue to payment' })
        this.saveButton = page.locator('[data-qa="save-address-button"]')
        this.savedAddressContainer = page.locator('[data-qa="saved-address-container"]')

        this.savedFirstName = page.locator('[data-qa="saved-address-firstName"]')
        this.savedLastName = page.locator('[data-qa="saved-address-lastName"]')
        this.savedAddress = page.locator('[data-qa="saved-address-street"]')
        this.savedPostcode = page.locator('[data-qa="saved-address-postcode"]')
        this.savedCity = page.locator('[data-qa="saved-address-city"]')
        this.savedCountry = page.locator('[data-qa="saved-address-country"]')

    }

    fillDeliveryDetails = async (deliveryDetails) =>{
        
        await this.firstNameField.waitFor()
        await this.firstNameField.fill(deliveryDetails.firstName)
        await this.lastNameField.waitFor()
        await this.lastNameField.fill(deliveryDetails.lastName)
        await this.addressField.waitFor()
        await this.addressField.fill(deliveryDetails.address)
        await this.postcodeField.waitFor()
        await this.postcodeField.fill(deliveryDetails.postcode)
        await this.cityField.waitFor()
        await this.cityField.fill(deliveryDetails.city)
        await this.countryDropdown.waitFor()
        await this.countryDropdown.selectOption(deliveryDetails.country)
        
    }
    
    saveAddress = async () => {
        const addrCountBefore = await this.savedAddressContainer.count()
        
        await this.saveButton.waitFor()
        await this.saveButton.click()
        
        await expect(this.savedAddressContainer).toHaveCount(addrCountBefore + 1)
        
        await this.savedFirstName.first().waitFor()
        expect(await this.savedFirstName.first().innerText()).toBe(await this.firstNameField.inputValue())
        expect(await this.savedLastName.first().innerText()).toBe(await this.lastNameField.inputValue())
        expect(await this.savedAddress.first().innerText()).toBe(await this.addressField.inputValue())
        expect(await this.savedPostcode.first().innerText()).toBe(await this.postcodeField.inputValue())
        expect(await this.savedCity.first().innerText()).toBe(await this.cityField.inputValue())
        expect(await this.savedCountry.first().innerText()).toBe(await this.countryDropdown.inputValue())
    }

    clearDetails = async () => {
        await this.firstNameField.waitFor()
        await this.firstNameField.fill("")
        await this.lastNameField.waitFor()
        await this.lastNameField.fill("")
        await this.addressField.waitFor()
        await this.addressField.fill("")
        await this.postcodeField.waitFor()
        await this.postcodeField.fill("")
        await this.cityField.waitFor()
        await this.cityField.fill("")
    }

    continueToPayment = async () => {
        await this.paymentButton.waitFor()
        await this.paymentButton.click()

        await this.page.waitForURL(/\/payment/, {timeout: 3000})

    }

}