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

import { OmnichannelAdmin, OmnichannelSectionsHref } from './omnichannel-admin';
import { FlexTab } from '../fragments/flextabs/flextab';
import { Listbox } from '../fragments/listbox';

class OmnichannelEditAgentFlexTab extends FlexTab {
	readonly listbox: Listbox;

	constructor(page: Page) {
		super(page.getByRole('dialog', { name: 'Edit User' }));
		this.listbox = new Listbox(page);
	}

	get inputMaxChats(): Locator {
		return this.root.locator('input[name="maxNumberSimultaneousChat"]');
	}

	get inputDepartment(): Locator {
		return this.root.getByLabel('Departments').getByRole('textbox');
	}

	getDepartmentOption(name: string) {
		return this.listbox.getOption(name);
	}

	async selectDepartment(name: string) {
		await this.inputDepartment.click();
		await this.inputDepartment.fill(name);
		await this.listbox.selectOption(name);
		// TODO: This is necessary due to the PaginatedMultiSelectFiltered not closing the list when an option is selected nor when close is clicked.
		// The line below can be removed once the component is adjusted in Fuselage
		await this.root.click();
	}

	findSelectedDepartment(name: string) {
		return this.root.getByLabel('Departments', { exact: true }).getByRole('option', { name });
	}

	private get inputStatus(): Locator {
		return this.root.getByText('Status', { exact: true });
	}

	async selectStatus(status: string) {
		await this.inputStatus.click();
		await this.listbox.selectOption(status);
	}
}

class OmnichannelAgentInfoFlexTab extends FlexTab {
	constructor(page: Page) {
		super(page.getByRole('dialog', { name: 'User Info' }));
	}

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

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

export class OmnichannelAgents extends OmnichannelAdmin {
	protected readonly route = OmnichannelSectionsHref.agents;

	protected readonly title = 'Agents';

	readonly editAgent: OmnichannelEditAgentFlexTab;

	readonly agentInfo: OmnichannelAgentInfoFlexTab;

	readonly listbox: Listbox;

	constructor(page: Page) {
		super(page);
		this.editAgent = new OmnichannelEditAgentFlexTab(page);
		this.agentInfo = new OmnichannelAgentInfoFlexTab(page);
		this.listbox = new Listbox(page);
	}

	get inputUsername(): Locator {
		return this.page.getByRole('textbox', { name: 'Username' });
	}

	get btnAddAgent(): Locator {
		return this.page.getByRole('button', { name: 'Add agent', exact: true });
	}

	async deleteAgent(name: string) {
		await this.search(name);
		await this.table.findRowByName(name).getByRole('button', { name: 'Remove' }).click();
		await this.deleteModal.confirmDelete();
	}

	get scrollContainer(): Locator {
		return this.page.locator('#position-container').getByTestId('virtuoso-scroller');
	}

	scrollToListBottom() {
		return this.scrollContainer.evaluate((el) => {
			el.scrollTop = el.scrollHeight;
			el.dispatchEvent(new Event('scroll'));
		});
	}

	async selectUsername(username: string) {
		await this.inputUsername.fill(username);
		await this.listbox.selectOption(username);
	}
}