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

export class VinLookupPage extends LookupPage {
    readonly vinLookupTextBox: Locator;
    readonly invalidVinInlineError: Locator;
    readonly cameraButton: Locator;
    readonly whereCanIFindMyVinLink: Locator;

    url = process.env['BASE_URL']! + '/fmg/?fmgPage=vin-lookup';  

    constructor(page: Page) {
        super(page);
        this.vinLookupTextBox = page.getByRole('textbox', { name: 'Enter your VIN' });
        this.invalidVinInlineError = this.page.locator('span.d-inline-flex.small.mt-1:has-text("Invalid VIN")');
        this.cameraButton = this.page.getByRole('textbox', { name: 'Camera icon/button' });
        this.whereCanIFindMyVinLink = this.page.getByRole('link', { name: 'Where can I find my VIN?', exact: true });
    }

    async enterVin(vin: string) {
        await this.vinLookupTextBox.fill(vin);
    }

    @step("VinLookupPage >> Lookup by VIN: ")
    async handleVehicleLookupVinPage(testData: Partial<ITestData>) {
        const { customerDetails, vehicleDetails, alertFlags } = testData;

        await this.validateProgressBar(ProgressBarPercentages.VinLookupPage);
        await this.enterVin(vehicleDetails!.vin!);
        await this.enterZip(customerDetails!.address.postalCode!);
        await this.handleZipValidation(customerDetails!.address.postalCode!, vehicleDetails!.vehicleLookupType!, alertFlags!);
    }
}