/**
 * SettingsEventMap
 *
 * Event-to-action mapping table: renders rows of event→action
 * selects grouped by category (Node, Edge, Background).
 *
 * Extracted from SettingsPanel.tsx in v1.4.0.
 *
 * @since 1.4.0
 */

import React from 'react';
import {
	CanvasEventType,
	EVENT_TYPE_INFO,
	type EventTypeInfo,
} from '../core/settings-types';
import { getActionsByCategories } from '../core/action-registry';

// --- Types ---

export interface SettingsEventMapProps {
	mappings: Record<CanvasEventType, string>;
	onActionChange: (event: CanvasEventType, actionId: string) => void;
	contentClassName?: string;
	groupClassName?: string;
	groupHeadingClassName?: string;
	rowClassName?: string;
	labelClassName?: string;
	selectClassName?: string;
}

interface EventMappingRowProps {
	event: EventTypeInfo;
	currentActionId: string;
	onActionChange: (event: CanvasEventType, actionId: string) => void;
	rowClassName?: string;
	labelClassName?: string;
	selectClassName?: string;
}

// --- Sub-component ---

export function EventMappingRow({
	event,
	currentActionId,
	onActionChange,
	rowClassName,
	labelClassName,
	selectClassName,
}: EventMappingRowProps) {
	const categories = getActionsByCategories();

	return (
		<div className={rowClassName}>
			<span className={labelClassName}>{event.label}</span>
			<select
				className={selectClassName}
				value={currentActionId}
				onChange={(e) => onActionChange(event.type, e.target.value)}
			>
				{categories.map((category) => (
					<optgroup key={category.category} label={category.label}>
						{category.actions.map((action) => (
							<option key={action.id} value={action.id}>
								{action.label}
							</option>
						))}
					</optgroup>
				))}
			</select>
		</div>
	);
}

// --- Component ---

export function SettingsEventMap({
	mappings,
	onActionChange,
	contentClassName,
	groupClassName,
	groupHeadingClassName,
	rowClassName,
	labelClassName,
	selectClassName,
}: SettingsEventMapProps) {
	const nodeEvents = Object.values(CanvasEventType).filter(
		(event) => EVENT_TYPE_INFO[event].category === 'node'
	);
	const edgeEvents = Object.values(CanvasEventType).filter(
		(event) => EVENT_TYPE_INFO[event].category === 'edge'
	);
	const backgroundEvents = Object.values(CanvasEventType).filter(
		(event) => EVENT_TYPE_INFO[event].category === 'background'
	);

	const renderGroup = (heading: string, events: CanvasEventType[]) => (
		<div className={groupClassName}>
			<h3 className={groupHeadingClassName}>{heading}</h3>
			{events.map((event) => (
				<EventMappingRow
					key={event}
					event={EVENT_TYPE_INFO[event]}
					currentActionId={mappings[event]}
					onActionChange={onActionChange}
					rowClassName={rowClassName}
					labelClassName={labelClassName}
					selectClassName={selectClassName}
				/>
			))}
		</div>
	);

	return (
		<div className={contentClassName}>
			{renderGroup('Node Events', nodeEvents)}
			{renderGroup('Edge Events', edgeEvents)}
			{renderGroup('Background Events', backgroundEvents)}
		</div>
	);
}
