import { expect, type Locator, type Page } from '@playwright/test';
import { BasePage } from './BasePage';
import { ICustomerDetails } from '@business-logic/types/CustomerDetails';

export class ContactDetailsPage extends BasePage {
    readonly page: Page;
    url = process.env['BASE_URL']! + '/fmg/?fmgPage=customer-details';

    // Contact details form 
    // TODO: Check if we can consolidate
    readonly firstNameTextBox: Locator;
    readonly lastNameTextBox: Locator;
    readonly emailAddressTextBox: Locator;
    readonly phoneNumberTextBox: Locator;
    readonly notesTextBox: 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.notesTextBox = this.page.getByRole('textbox', { name: 'Notes' });
    }

    
    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 fillNotes(notes?: string) {
        if (notes) {
            await this.notesTextBox.fill(notes);
        }
    }
}