import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { IVehicleDetails } from '@business-logic/types/CustomerDetails';

export class VehicleSelectionPage extends BasePage {
    readonly page: Page;
    readonly yearDropdown: Locator;
    readonly makeDropdown: Locator;
    readonly modelDropdown: Locator;
    readonly styleDropdown: Locator;
    readonly nonServiceableWarning: Locator;

    issPageValue = 'vehicle-selection';

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.yearDropdown = this.page.locator('#yearQuestionField');
        this.makeDropdown = this.page.locator('#makeQuestionField');
        this.modelDropdown = this.page.locator('#modelQuestionField');
        this.styleDropdown = this.page.locator('#styleQuestionField');
        this.nonServiceableWarning = this.page.getByText('Service not available for your vehicle');
        // this.validateURL(this.url);
    }

    async selectVehicle(vehicleDetails: IVehicleDetails) {
        await this.yearDropdown.selectOption(vehicleDetails.year);
        await this.yearDropdown.press('Tab');
        await this.makeDropdown.selectOption(vehicleDetails.make);
        await expect(this.modelDropdown).toBeEditable({ timeout: 5000 });
        await this.makeDropdown.press('Tab');
        await this.modelDropdown.selectOption(vehicleDetails.model);
        await expect(this.styleDropdown).toBeEditable({ timeout: 2000 });
        await this.modelDropdown.press('Tab');
        if (vehicleDetails.style) {
            await this.styleDropdown.selectOption(vehicleDetails.style);
        } else if (await this.styleDropdown.inputValue() === 'Select an option') {
            await this.styleDropdown.selectOption({ index: 1 })
        }
    }

    async assertNonServiceableAlertBehavior() {
        await expect(this.nonServiceableWarning).toBeVisible();
        await expect(this.continueButton).toBeDisabled();
    }
}