const React = require("react");
const MenuList = require("../../../../src/tui/components/common/MenuList");

describe("MenuList Component", () => {
	test("component can be created with default props", () => {
		const component = React.createElement(MenuList, {});
		expect(component).toBeDefined();
		expect(component.type).toBe(MenuList);
	});

	test("component accepts items array", () => {
		const items = ["Option 1", "Option 2", "Option 3"];
		const component = React.createElement(MenuList, { items });

		expect(component.props.items).toEqual(items);
	});

	test("component accepts string items", () => {
		const items = ["Home", "Settings", "Exit"];
		const component = React.createElement(MenuList, { items });

		expect(component.props.items).toEqual(items);
	});

	test("component accepts object items with labels", () => {
		const items = [
			{ label: "Home", shortcut: "h" },
			{ label: "Settings", shortcut: "s" },
			{ label: "Exit", shortcut: "q" },
		];
		const component = React.createElement(MenuList, { items });

		expect(component.props.items).toEqual(items);
	});

	test("component accepts object items with different properties", () => {
		const items = [
			{ title: "Home", shortcut: "h", description: "Go to home screen" },
			{ name: "Settings", shortcut: "s", description: "Configure app" },
			{ label: "Exit", shortcut: "q", description: "Quit application" },
		];
		const component = React.createElement(MenuList, { items });

		expect(component.props.items).toEqual(items);
	});

	test("component accepts selectedIndex prop", () => {
		const component = React.createElement(MenuList, {
			selectedIndex: 2,
			items: ["A", "B", "C"],
		});

		expect(component.props.selectedIndex).toBe(2);
	});

	test("component accepts onSelect callback", () => {
		const mockOnSelect = jest.fn();
		const component = React.createElement(MenuList, {
			onSelect: mockOnSelect,
			items: ["A", "B", "C"],
		});

		expect(component.props.onSelect).toBe(mockOnSelect);
	});

	test("component accepts onHighlight callback", () => {
		const mockOnHighlight = jest.fn();
		const component = React.createElement(MenuList, {
			onHighlight: mockOnHighlight,
			items: ["A", "B", "C"],
		});

		expect(component.props.onHighlight).toBe(mockOnHighlight);
	});

	test("component accepts showShortcuts prop", () => {
		const component = React.createElement(MenuList, {
			showShortcuts: false,
			items: ["A", "B", "C"],
		});

		expect(component.props.showShortcuts).toBe(false);
	});

	test("component accepts color customization props", () => {
		const component = React.createElement(MenuList, {
			highlightColor: "green",
			normalColor: "cyan",
			shortcutColor: "yellow",
			items: ["A", "B", "C"],
		});

		expect(component.props.highlightColor).toBe("green");
		expect(component.props.normalColor).toBe("cyan");
		expect(component.props.shortcutColor).toBe("yellow");
	});

	test("component accepts prefix customization", () => {
		const component = React.createElement(MenuList, {
			prefix: "→ ",
			normalPrefix: "   ",
			items: ["A", "B", "C"],
		});

		expect(component.props.prefix).toBe("→ ");
		expect(component.props.normalPrefix).toBe("   ");
	});

	test("component accepts disabled prop", () => {
		const component = React.createElement(MenuList, {
			disabled: true,
			items: ["A", "B", "C"],
		});

		expect(component.props.disabled).toBe(true);
	});

	test("component accepts width prop", () => {
		const component = React.createElement(MenuList, {
			width: 50,
			items: ["A", "B", "C"],
		});

		expect(component.props.width).toBe(50);
	});

	test("component handles empty items array", () => {
		const component = React.createElement(MenuList, { items: [] });
		expect(component.props.items).toEqual([]);
	});

	test("component handles undefined items", () => {
		const component = React.createElement(MenuList, { items: undefined });
		expect(component.props.items).toBeUndefined();
	});

	test("component accepts all expected props", () => {
		const fullProps = {
			items: [
				{ label: "Home", shortcut: "h", description: "Go home" },
				{ label: "Settings", shortcut: "s", description: "Configure" },
			],
			selectedIndex: 1,
			onSelect: jest.fn(),
			onHighlight: jest.fn(),
			showShortcuts: true,
			highlightColor: "blue",
			normalColor: "white",
			shortcutColor: "gray",
			prefix: "► ",
			normalPrefix: "  ",
			disabled: false,
			width: 60,
		};

		const component = React.createElement(MenuList, fullProps);
		expect(component).toBeDefined();
		expect(component.props).toMatchObject(fullProps);
	});

	test("component has correct default values", () => {
		const component = React.createElement(MenuList, {});

		// Check that defaults are applied correctly in the component
		expect(component.props.items).toBeUndefined(); // Will use default in component
		expect(component.props.selectedIndex).toBeUndefined(); // Will use default in component
		expect(component.props.showShortcuts).toBeUndefined(); // Will use default in component
		expect(component.props.highlightColor).toBeUndefined(); // Will use default in component
		expect(component.props.disabled).toBeUndefined(); // Will use default in component
	});

	test("component type is correct", () => {
		const component = React.createElement(MenuList, { items: ["A", "B"] });
		expect(typeof MenuList).toBe("function");
		expect(component.type).toBe(MenuList);
	});
});