import { type Locator, type Page } from '@playwright/test';
import { LookupPage } from './LookupPage';
import { step } from 'framework/localTypes/Step';
import { ITestData } from 'framework/TestData';
import { ProgressBarPercentages } from 'framework/localTypes/Enums';

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

    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 } = testData;
        let vin: string;

        if (Array.isArray(vehicleDetails?.vin)) {
            vin = vehicleDetails!.vin[0];
        } else {
            vin = vehicleDetails?.vin || '';
        }

        await this.validateProgressBar(ProgressBarPercentages.VinLookupPage);
        await this.enterVin(vin);
        await this.enterZip(customerDetails!.address.postalCode!);
        await this.handleZipValidation(testData);
    }
}