import { render, RenderResult } from '@stencil/vitest';
import { HeaderMenuToggleDetail } from '../../ontario-header/ontario-header.interface';

describe('ontario-header-overflow-menu', () => {
	let page: RenderResult;
	let host: HTMLOntarioHeaderOverflowMenuElement;
	let hostShadow: ShadowRoot;

	beforeEach(async () => {
		page = await render(`<ontario-header-overflow-menu></ontario-header-overflow-menu>`);

		host = page.root as HTMLOntarioHeaderOverflowMenuElement;
		hostShadow = host.shadowRoot as ShadowRoot;

		await page.waitForChanges();
	});

	it('should render without errors', async () => {
		expect(host).not.toBeNull();
		expect(host.tagName).toBe('ONTARIO-HEADER-OVERFLOW-MENU');

		expect(hostShadow).not.toBeNull();
	});

	it('should render menu items correctly', async () => {
		const menuItems = [
			{ title: 'Link 1', href: '/link-1', linkIsActive: false },
			{ title: 'Link 2', href: '/link-2', linkIsActive: false },
		];

		host.menuItems = menuItems;

		await page.waitForChanges();

		// Check if the menuItem data is set correctly in the menu overflow component
		// Should match the number of menu items set in the constant above
		expect(host.menuItems.length).toBe(2);

		const overflowMenuRenderedMenuItems = hostShadow.querySelectorAll(
			'a.ontario-menu-item',
		) as NodeListOf<HTMLAnchorElement>;

		// Check to see the HTML output of the rendered menu items is as expected
		expect(overflowMenuRenderedMenuItems.length).toBe(2);
		expect(overflowMenuRenderedMenuItems[0].textContent?.trim()).toBe(menuItems[0].title);
		expect(overflowMenuRenderedMenuItems[0].href).toContain(menuItems[0].href);
		expect(overflowMenuRenderedMenuItems[1].textContent?.trim()).toBe(menuItems[1].title);
		expect(overflowMenuRenderedMenuItems[1].href).toContain(menuItems[1].href);

		expect(host).toMatchSnapshot();
	});

	it('should call menu item onClickHandler when item is clicked', async () => {
		const onClickHandler = vi.fn((event: Event) => event.preventDefault());
		host.menuItems = [{ title: 'Link 1', href: '/link-1', linkIsActive: false, onClickHandler }];

		await page.waitForChanges();

		const menuItem = hostShadow.querySelector('a.ontario-menu-item') as HTMLAnchorElement;
		expect(menuItem).not.toBeNull();

		menuItem.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));

		expect(onClickHandler).toHaveBeenCalledTimes(1);
	});

	it('should not auto-focus the first item on click-open in standalone mode', async () => {
		const component = page.instance as unknown as {
			handleMenuButtonToggled: (event: CustomEvent<HeaderMenuToggleDetail>) => void;
			shouldFocusFirstItemOnOpen: boolean;
			menuIsOpen: boolean;
		};

		component.handleMenuButtonToggled({
			detail: { isOpen: true, trigger: 'click' },
		} as CustomEvent<HeaderMenuToggleDetail>);

		expect(component.menuIsOpen).toBe(true);
		expect(component.shouldFocusFirstItemOnOpen).toBe(false);
	});

	it('should auto-focus the first item on keyboard-open in standalone mode', async () => {
		const component = page.instance as unknown as {
			handleMenuButtonToggled: (event: CustomEvent<HeaderMenuToggleDetail>) => void;
			shouldFocusFirstItemOnOpen: boolean;
			menuIsOpen: boolean;
		};

		component.handleMenuButtonToggled({
			detail: { isOpen: true, trigger: 'keyboard' },
		} as CustomEvent<HeaderMenuToggleDetail>);

		expect(component.menuIsOpen).toBe(true);
		expect(component.shouldFocusFirstItemOnOpen).toBe(true);
	});
});