import test, { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { ITestData } from 'framework/TestData';

export class HomePage extends BasePage {
    
    readonly page: Page;
    readonly letsGetStartedButton: Locator;
    readonly cusmodalPopup: Locator;
    readonly closePopupButton: Locator;

    //Quick Quote (LeadGen) Form
    readonly yearDropdown: Locator;
    readonly makeDropdown: Locator;
    readonly modelDropdown: Locator;
    readonly styleDropdown: Locator;
    readonly damageTypeDropdown: Locator;
    readonly zipCodeTextBox: Locator;
    readonly phoneNumberTextBox: Locator;
    readonly paymentOptionDropdown: Locator;
    readonly viewQuoteButton: Locator;

    //Zip Entry 
    readonly widgetZipEntryInputField: Locator;
    readonly getQuoteAndScheduleButton: Locator;

    url = process.env['BASE_URL']!;

    constructor(page: Page) {
        super(page);

        this.page = page;
        this.letsGetStartedButton = this.page.locator('a.zip-submit-button');
        this.cusmodalPopup = this.page.locator('#Cusmodalpopup');
        this.closePopupButton = this.page.getByRole('button', { name: '×' });

        //Quick Quote (LeadGen) Form
        this.yearDropdown = this.page.locator('#year');
        this.makeDropdown = this.page.locator('#make');
        this.modelDropdown = this.page.locator('#model');
        this.styleDropdown = this.page.locator('#style');
        this.damageTypeDropdown = this.page.locator('#damage');
        this.zipCodeTextBox = this.page.locator('#zipcodeinput');
        this.phoneNumberTextBox = this.page.locator('#phonenumberinput');
        this.paymentOptionDropdown = this.page.locator('#insuranceCheckbox');
        this.viewQuoteButton = this.page.locator('#ctaSubmit');

        //Zip Entry
        this.widgetZipEntryInputField = this.page.locator('input#zipcode');
        this.getQuoteAndScheduleButton = this.page.getByLabel('main').getByRole('link', { name: 'Get quote + schedule' });
    }

    async goto(testData: Partial<ITestData>) {
        const experimentUrlExtension = await this.buildExperimentUrl(testData);
        await this.page.goto(process.env['BASE_URL']! + experimentUrlExtension);
    }

    async isCurrentVariant(): Promise<boolean> {
        return !(await this.page.getByPlaceholder('Enter service ZIP code').isVisible());
    }

    async letsGetStarted(zip: string, enterFunnelWithZip: boolean) {
        if (enterFunnelWithZip) {
            await this.widgetZipEntryInputField.fill(zip);
            /* await this.letsGetStartedButton.evaluate((element, zip) => {
                const currentHref = element.getAttribute('href') || '';
                element.setAttribute('href', `${currentHref}?zipCode=${zip}`);
            }, zip);*/
        }

        // Wait until modal pop up opens and close pop up
        await this.page.waitForTimeout(5000);
        if (await this.cusmodalPopup.isVisible()) {
            await this.closePopupButton.click();
        }
        await this.letsGetStartedButton.click();
    }
}