import type { Locator, Page } from '@playwright/test';

import { FlexTab } from '../fragments/flextabs/flextab';
import { OmnichannelContactReviewModal } from '../fragments/modals';

export class OmnichannelContactInfo extends FlexTab {
	readonly contactReviewModal: OmnichannelContactReviewModal;

	constructor(page: Page) {
		super(page.getByRole('dialog', { name: 'Contact' }));
		this.contactReviewModal = new OmnichannelContactReviewModal(page);
	}

	get infoContactEmail(): Locator {
		return this.root.getByRole('list', { name: 'Email' }).getByRole('listitem').first().locator('p');
	}

	get btnEdit(): Locator {
		return this.root.locator('role=button[name="Edit"]');
	}

	get tabHistory(): Locator {
		return this.root.getByRole('tab', { name: 'History' });
	}

	get historyItem(): Locator {
		return this.root.getByRole('listitem').first();
	}

	get historyMessage(): Locator {
		return this.root.getByRole('listitem').first();
	}

	get btnOpenChat(): Locator {
		return this.root.getByRole('button', { name: 'Open chat' });
	}

	get btnSeeConflicts(): Locator {
		return this.root.getByRole('button', { name: 'See conflicts' });
	}

	private get customFieldsGroup() {
		return this.root.getByRole('group', { name: 'Custom Fields' });
	}

	getInfoByValue(value: string): Locator {
		return this.root.getByText(value, { exact: true });
	}

	getVisitorCustomField(label: string): Locator {
		return this.customFieldsGroup.getByLabel(label);
	}

	async solveConflict(field: string, value: string) {
		await this.btnSeeConflicts.click();
		await this.contactReviewModal.solveConfirmation(field, value);
	}
}