import type { Locator, Page } from 'playwright-core';

import { Popup } from './popup';

class VideoRecorderPopup extends Popup {
	constructor(root: Locator) {
		super(root);
	}

	get btnRecord(): Locator {
		return this.root.getByRole('button', { name: 'Record' });
	}

	get btnStopRecording(): Locator {
		return this.root.getByRole('button', { name: 'Stop Recording' });
	}

	get btnSend(): Locator {
		return this.root.getByRole('button', { name: 'Send' });
	}

	async record() {
		await this.btnRecord.click();
		await this.btnStopRecording.waitFor({ state: 'visible' }).then(() => this.btnStopRecording.click());
		await this.btnSend.click();
		await this.waitForDismissal();
	}
}

export abstract class Composer {
	readonly videoRecorderPopup: VideoRecorderPopup;

	constructor(protected root: Locator) {
		this.root = root;
		this.videoRecorderPopup = new VideoRecorderPopup(this.root.page().getByRole('dialog', { name: 'Video record' }));
	}

	get inputMessage(): Locator {
		return this.root.locator('[name="msg"]');
	}

	get btnJoinRoom(): Locator {
		return this.root.getByRole('button', { name: 'Join' });
	}

	get toolbarPrimaryActions(): Locator {
		return this.root.getByRole('toolbar', { name: 'Composer Primary Actions' });
	}

	get allPrimaryActions(): Locator {
		return this.toolbarPrimaryActions.getByRole('button');
	}

	get btnEmoji(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Emoji', exact: true });
	}

	get btnAudioMessage(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Audio message' });
	}

	getFileByName(fileName: string): Locator {
		return this.root.getByRole('group', { name: fileName, exact: true });
	}

	get groupUploads() {
		return this.root.getByRole('group', { name: 'Uploads', exact: true });
	}

	getFilesInComposer(): Locator {
		return this.groupUploads.getByRole('group', { name: /^(?!Close$)/ });
	}

	async removeFileByName(fileName: string): Promise<void> {
		return this.getFileByName(fileName).getByRole('button', { name: 'Remove', exact: true }).click();
	}

	get btnSend(): Locator {
		return this.root.getByRole('button', { name: 'Send' });
	}

	get btnCancel(): Locator {
		return this.root.getByRole('button', { name: 'Cancel', exact: true });
	}

	get btnOptionFileUpload(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Upload file' });
	}

	get btnVideoMessage(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Video message' });
	}

	get btnMenuMoreActions() {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'More actions' });
	}

	get btnItalicFormatter(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Italic', exact: true });
	}

	get btnBoldFormatter(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Bold', exact: true });
	}

	get btnLinkFormatter(): Locator {
		return this.toolbarPrimaryActions.getByRole('button', { name: 'Link', exact: true });
	}

	get boxPopup(): Locator {
		return this.root.locator('[role="menu"][name="ComposerBoxPopup"]');
	}

	get readOnlyFooter(): Locator {
		return this.root.getByText('This room is read only');
	}

	get typingIndicator(): Locator {
		return this.root.getByRole('status').getByText(/typing/i);
	}

	get addLinkModal(): Locator {
		return this.root.page().getByRole('dialog', { name: 'Add link' });
	}
}

export class RoomComposer extends Composer {
	constructor(page: Page) {
		super(page.locator('footer[aria-label="Room composer"]'));
	}
}

export class ThreadComposer extends Composer {
	constructor(page: Page) {
		super(page.locator('footer[aria-label="Thread composer"]'));
	}
}