import { expect, type Locator, type Page } from '@playwright/test';
import { InsuranceBasePage } from './InsuranceBasePage';
import { IClaimDetails } from '@business-logic/types/CustomerDetails';
import { step } from '@business-logic/types/Step';
import { ITestData } from '@business-logic/types/ITestData';

export class CoverageStatementPage extends InsuranceBasePage {
    readonly page: Page;
    readonly scheduleOnlineButton: Locator;
    readonly cancelMyClaimButton: Locator;
    readonly deductibleAmount: Locator;
    readonly verfiyingCoverageText: Locator;
    readonly continueButton: Locator;     // For ITAC/NoComp
    url = process.env['BASE_URL']! + '/FixMyGlass/CoverageStatement.aspx';

    constructor(page: Page) {
        super(page);
        this.page = page;
        this.scheduleOnlineButton = this.page.getByText('Continue to schedule online');
        this.cancelMyClaimButton = this.page.getByText('Cancel my claim');
        this.deductibleAmount = this.page.getByRole('heading', { name: '$' }).locator('span');
        this.verfiyingCoverageText = this.page.getByRole('heading', { name: 'We’re verifying your coverage' });
        this.continueButton = page.getByRole('button', { name: 'Continue' });
        // this.validateURL(this.url);
    }

    async scheduleOnline(){
        await this.scheduleOnlineButton.click();
    }

    async cancelMyClaim(){
        await this.cancelMyClaimButton.click();
    }

    async validateDeductibleAmount(claimDetails: IClaimDetails) {
        // Format the deductible number to have 2 decimal places
        const formattedDeductible = typeof claimDetails.policyDeductible === 'number' 
            ? claimDetails.policyDeductible.toFixed(2) 
            : Number(claimDetails.policyDeductible).toFixed(2);

        // Add a regex to match the formatted value with commas
        const expectedDeductibleRegex = formattedDeductible.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        
        // Narrow down the selector to target the exact element
        const deductibleElement = this.page.locator(
            "span.deductible-text-black[data-bind='text: deductibleFormatted']"
        );

        // Check if the locator is visible before running the expectation
        if (await deductibleElement.isVisible()) {
            // Check if the page contains the properly formatted deductible amount
            await expect(deductibleElement).toContainText(`$${expectedDeductibleRegex}`);
        }
    }

    async validateUnverifiedText(){
        await expect(this.verfiyingCoverageText).toBeEnabled();
    }

    @step("CoverageStatementPage >> Next page: ")
    async handleCoverageStatementPage(testData: Partial<ITestData>) {
        const { claimDetails } = testData;

        await this.validateDeductibleAmount(claimDetails!);
        await this.nextPage();
    }
}