managarten/apps-archived/memoro/apps/mobile/components/molecules/TableOfContentsMenu.tsx

import React, { useMemo } from 'react';
import { Platform, View } from 'react-native';
import Icon from '~/components/atoms/Icon';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useTranslation } from 'react-i18next';

// @expo/ui ContextMenu - use appropriate platform import
import {
	ContextMenu as ContextMenuiOS,
	Button as ButtoniOS,
	Host as HostiOS,
} from '@expo/ui/swift-ui';
import {
	ContextMenu as ContextMenuAndroid,
	Button as ButtonAndroid,
} from '@expo/ui/jetpack-compose';

// Select the correct components based on platform
const ContextMenu = Platform.OS === 'ios' ? ContextMenuiOS : ContextMenuAndroid;
const ExpoButton = Platform.OS === 'ios' ? ButtoniOS : ButtonAndroid;
const Host = Platform.OS === 'ios' ? HostiOS : View;

interface TableOfContentsItem {
	id: string;
	title: string;
	icon: string;
	onPress: () => void;
}

interface TableOfContentsMenuProps {
	items: TableOfContentsItem[];
}

// Maximum number of items to prevent performance issues
const MAX_MENU_ITEMS = 50;

/**
 * TableOfContentsMenu - Ein natives Dropdown-Menü für die Navigation innerhalb eines Memos
 *
 * Zeigt verschiedene Abschnitte wie Überschrift, Memory-Titel, Audiodatei, Transkript an
 * und ermöglicht das Scrollen zu diesen Abschnitten.
 * Nutzt @expo/ui ContextMenu für native Menus auf iOS und Android.
 */
const TableOfContentsMenu: React.FC<TableOfContentsMenuProps> = ({ items }) => {
	const { isDark } = useTheme();
	const { t } = useTranslation();

	const iconColor = isDark ? '#FFFFFF' : '#000000';

	const getSystemIconForIcon = (iconName: string) => {
		switch (iconName) {
			case 'text-outline':
				return 'textformat';
			case 'document-text-outline':
				return 'doc.text';
			case 'reader-outline':
				return 'book';
			case 'play-outline':
				return 'play.circle';
			case 'document-outline':
				return 'doc.plaintext';
			default:
				return 'doc.text';
		}
	};

	// Centralized sorting function - memoized to prevent redundant calculations
	const sortedItems = useMemo(() => {
		const order = {
			'document-outline': 0, // Transcript (first in array, appears at top)
			'play-outline': 1, // Audio
			'document-text-outline': 2, // Old Memories icon
			'reader-outline': 2, // New Memories/Summary icon
			'text-outline': 3, // Title (last in array, appears at bottom)
		};
		// Limit items to prevent performance issues
		const limitedItems = items.slice(0, MAX_MENU_ITEMS);
		return [...limitedItems].sort((a, b) => {
			return (
				(order[a.icon as keyof typeof order] ?? 999) - (order[b.icon as keyof typeof order] ?? 999)
			);
		});
	}, [items]);

	// Menu items
	const menuItems = useMemo(() => {
		return sortedItems.map((item) => ({
			key: item.id,
			title: item.title,
			systemIcon: getSystemIconForIcon(item.icon),
			onSelect: item.onPress,
		}));
	}, [sortedItems]);

	return (
		<Host>
			<ContextMenu>
				<ContextMenu.Items>
					{menuItems.map((item) => (
						<ExpoButton
							key={item.key}
							{...(Platform.OS === 'ios' && { systemImage: item.systemIcon })}
							onPress={item.onSelect}
						>
							{item.title}
						</ExpoButton>
					))}
				</ContextMenu.Items>

				<ContextMenu.Trigger>
					<View
						style={{
							width: '100%',
							height: '100%',
							justifyContent: 'center',
							alignItems: 'center',
						}}
					>
						<Icon name="reader-outline" size={24} color={iconColor} />
					</View>
				</ContextMenu.Trigger>
			</ContextMenu>
		</Host>
	);
};

export default TableOfContentsMenu;