import { expect, Page } from "@playwright/test";

export class CartPage {
    page: Page;

    constructor(page: Page) {
        this.page = page;
    }

    defaultPaypalAccount = {
        username: "for.test.perifit@gmail.com",
        password: "Testforperifit2024"
    };

    defaultShopPay = {
        account: "for.test.perifit@gmail.com",
        password: "Testforperifit2024"
    }

    xpathBtnBuyWithShopPay = "//shop-pay-wallet-button";
    xpathBtnBuyWithPayPal = "//div[@aria-label='PayPal' and @id='buttons-container'] | //paypal-button";

    // PayPal
    xpathPayPalExpress = "(//div[@aria-label='PayPal' and @id='buttons-container']) | //paypal-button";
    xpathHeaderTextPayPal = "//h1[@id='headerText']";
    xpathUsernamePayPal = "//input[@id='email']";
    xpathPasswordPayPal = "//input[@id='password']";
    xpathBtnLogIn = "//button[@id='btnLogin']";
    xpathChooseAWayToPay = "//div[text()='Choose a way to pay']";
    xpathAddACreditOrPrepaidCard = "//div[text()='Add a credit or prepaid card']";
    xpathCardNumberPayPal = "//input[@id='cardNumber']";
    xpathExpirationDatePayPal = "//input[@id='cardExpiry']";
    xpathCardCVVPayPal = "//input[@id='cardCvv']";
    xpathLogoPayPal = "(//p[text()='PayPal'])[1]";

    // Cart Drawer

    // ShopPay
    xpathIframeShopPayPayment = "//iframe[@id='shop-pay-login-iframe']";
    xpathBtnChangeShopPayPayment = "//button[text()='Change']";
    xpathCheckout = "//button[@class='button button--xl w-full']"

    get cartLoc() {
        return {
            xpahtBtnCheckoutCartDrawer: this.page.locator("//button[@name='checkout']")
        }
    }


    async clickBtnCheckout() {
        await this.page.waitForTimeout(5_000);
        await expect(this.page.locator("//form[@class='cart-form rounded']//button[@name='checkout']")).toBeVisible({ timeout: 20_000 });
        const checkoutButton = this.page.locator("//form[@class='cart-form rounded']//button[@name='checkout']");
        if (await checkoutButton.count() > 0) {
            await checkoutButton.click();
            await this.page.waitForTimeout(5_000);
        }
    }

    async buyWithShopPay() {
        await this.page.waitForTimeout(3000);
        await this.page.click(this.xpathBtnBuyWithShopPay);

        const iframeShopPayPayment = this.page.frameLocator(this.xpathIframeShopPayPayment);
        await iframeShopPayPayment.locator("//input[@id='IdentityEmailForm-input']").fill(this.defaultShopPay.account);
        await iframeShopPayPayment.locator("//button[contains(@class,'button')]").click();
        await this.page.waitForTimeout(7000);
    }

    async buyWithPayPal() {
        await this.page.locator(this.xpathCheckout).waitFor({ state: 'visible', timeout: 30_000 });
        await this.page.locator(this.xpathCheckout).click();
        const iframePayPal = this.page.frameLocator("//iframe[contains(@title,'PayPal') or @id='PAYPAL_EXPRESS-iframe']").first();

        await expect(iframePayPal.locator(this.xpathBtnBuyWithPayPal)).toBeVisible({ timeout: 30_000 })
        await this.page.waitForTimeout(2_000);
        const [popup] = await Promise.all([this.page.waitForEvent("popup", { timeout: 20_000 }), await iframePayPal.locator(this.xpathBtnBuyWithPayPal).click({ force: true })]);
        await popup.waitForLoadState();

        // Just verify the popup is opened
        return true;

        // login
        // await popup.waitForSelector(this.xpathHeaderTextPayPal);
        // await popup.locator("//input[@id='email']").fill(this.defaultPaypalAccount.username);
        // await popup.locator("//button[contains(@class,'login-click-next')]").click();
        // await popup.waitForTimeout(6000);

        // if (await popup.locator(this.xpathLogoPayPal).isVisible()) {
        //     return true;
        // } else if (await popup.locator(this.xpathHeaderTextPayPal).isVisible()) {
        //     return true;
        // } else if (await popup.locator(this.xpathPasswordPayPal).isVisible()) {
        //     return true;
        // } else {
        //     return false;
        // }

        // await popup.waitForSelector(this.xpathHeaderTextPayPal);
        // await popup.locator(this.xpathPasswordPayPal).fill(this.defaultPaypalAccount.password);
        // await popup.locator(this.xpathBtnLogIn).click();
        // await popup.waitForSelector("//button[@id='change-shipping']");
        // // await popup.click("//button[@data-testid='submit-button-initial']");
    }

    async buyWithPaypalInCheckout() {
        await this.page.waitForTimeout(5_000);
        const iframePayPal = this.page.frameLocator("//iframe[contains(@title,'PayPal') or @id='PAYPAL_EXPRESS-iframe']").first();
        const [popup] = await Promise.all([this.page.waitForEvent("popup", { timeout: 30_000 }), await iframePayPal.locator(this.xpathBtnBuyWithPayPal).click()]);
        await popup.waitForLoadState();
        return true;
    }
}