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

export class BailoutPage extends BasePage {
    readonly page: Page;
    readonly firstNameTextBox: Locator;
    readonly lastNameTextBox: Locator;
    readonly emailAddressTextBox: Locator;
    readonly phoneNumberTextBox: Locator;
    readonly optInToSMSBox: Locator;

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

        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.optInToSMSBox = this.page.getByRole('checkbox', { name: 'Opt in to SMS' });
    }

    async fillOutBailoutForm(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 checkOptInToSMSBox() {
        await this.optInToSMSBox.check();
    }

    @step("BailoutPage >> Fill out bailout form: ")
    async handleBailoutPage(testData: Partial<ITestData>) {

        const { customerDetails } = testData;

        await expect(this.page).toHaveURL(/bailout/);
        await this.fillOutBailoutForm(customerDetails!);

        if (testData.isOptedInForTextMessages) {
            await this.checkOptInToSMSBox();
        }

        await this.nextPage();
    }
}