import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { ICustomerDetails } from 'safelite-playwright-core';
import { step } from 'framework/localTypes/Step';
import { ITestData } from 'framework/TestData';
import { ProgressBarPercentages } from 'framework/localTypes/Enums';

export class ContactDetailsPage extends BasePage {
    readonly page: Page;

    // Contact details form 
    // TODO: Check if we can consolidate
    readonly firstNameTextBox: Locator;
    readonly lastNameTextBox: Locator;
    readonly emailAddressTextBox: Locator;
    readonly phoneNumberTextBox: Locator;
    readonly textOptInBox: Locator;

    constructor(page: Page) {
        super(page);
        this.page = page;

        // Contact details form
        this.firstNameTextBox = this.page.getByRole('textbox', { name: 'First name' });
        this.lastNameTextBox = this.page.getByRole('textbox', { name: 'Last name' });
        this.emailAddressTextBox = this.page.getByRole('textbox', { name: 'Email address' });
        this.phoneNumberTextBox = this.page.getByRole('textbox', { name: 'Phone number' });
        this.textOptInBox = this.page.getByRole('checkbox', { name: 'Text me updates about my appointment*' });
    }

    
    async enterContactDetails(customerDetails: ICustomerDetails) {
        await this.firstNameTextBox.fill(customerDetails.firstName);
        await this.lastNameTextBox.fill(customerDetails.lastName);
        await this.emailAddressTextBox.fill(customerDetails.email);
        await this.phoneNumberTextBox.fill(customerDetails.phoneNumber);
    }

    async checkTextMeUpdates(customerDetails: ICustomerDetails) {
        await this.textOptInBox.check();
    }

    @step("ContactDetailsPage >> Enter contact details: ")
    async handleContactDetailsPage(testData: Partial<ITestData>) {
        const { customerDetails } = testData;

        await this.validateProgressBar(ProgressBarPercentages.ContactDetailsPage);
        await this.enterContactDetails(customerDetails!);

        if (testData.isOptedInForTextMessages) {
            await this.checkTextMeUpdates(customerDetails!);
        }

        await this.nextPage();
    }
}