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

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 enterServiceZipTextBox: Locator; 
    readonly zipEntryLetsGetStartedButton: Locator;
    readonly getQuoteAndScheduleButton: Locator;

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

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

        this.page = page;
        this.letsGetStartedButton = this.page.locator('a.btn.btn-primary.ghost');
        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.enterServiceZipTextBox = this.page.locator('#zipCodeTextbox');
        this.zipEntryLetsGetStartedButton = this.page.locator('#zipCodeTextboxButton');
        this.getQuoteAndScheduleButton = this.page.getByLabel('main').getByRole('link', { name: 'Get quote + schedule' });
    }

    async goto() {
        await this.page.goto(process.env['BASE_URL']!);
        // await this.validateURL(this.url);
    }

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

    async letsGetStarted(zip: string, enterFunnelWithZip: boolean) {
        if (enterFunnelWithZip) {
            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();
    }


}