import { type Locator, type Page } from '@playwright/test';
import { LookupPage } from './LookupPage';
import { IVehicleDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';
import { ProgressBarPercentages } from '@business-logic/types/Enums';

export class VehicleLookupLicensePage extends LookupPage {
    readonly licensePlateNumTextBox: Locator;
    readonly licensePlateStateDrpDwn: Locator;
    
    url = process.env['BASE_URL']! + '/fmg/?fmgPage=license-plate-lookup';

    constructor(page: Page) {
        super(page);
        this.licensePlateNumTextBox = page.getByRole('textbox', { name: 'License plate number'});
        this.licensePlateStateDrpDwn = page.getByRole('combobox', { name: 'License plate state'});
        
        // Override the service zip textbox locator for license-specific label
        this.serviceZipTextBox = page.getByRole('textbox', { name: 'ZIP code on vehicle' });
        
        // Override the unserviceableZipAlertMessage for license-specific message
        this.unserviceableZipAlertMessage = this.page.locator('div.alert-danger.widget-name-AlertVinNotFoundWidget', 
            { hasText: "Your license plate didn't return a VIN match." });
    }

    async enterPlateDetails(vehicleDetails: IVehicleDetails) {
        await this.licensePlateNumTextBox.fill(vehicleDetails.licensePlateNumber || '');
    }

    @step("VehicleLookupLicensePage >> Lookup by license plate: ")
    async handleVehicleLookupLicensePage(testData: Partial<ITestData>) {
        const { customerDetails, vehicleDetails, alertFlags } = testData;

        await this.validateProgressBar(ProgressBarPercentages.VehicleLookupLicensePage);
        await this.enterPlateDetails(vehicleDetails!);
        await this.enterZip(customerDetails!.address.postalCode!);
        await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
    }
}