managarten/memoro/apps/mobile/features/menus/HeaderMenu.tsx

import React, { useMemo } from 'react';
import { Platform, View, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';
import Icon from '~/components/atoms/Icon';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import { useUnuploadedCount } from '~/features/storage/hooks/useUnuploadedCount';
import { useInitializeUploadStatus } from '~/features/storage/store/uploadStatusStore';
import NotificationBadge from '~/components/atoms/NotificationBadge';

// @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; // Android doesn't need Host

interface HeaderMenuProps {
  onThemeToggle?: () => void;
}

/**
 * Header-Menü-Komponente
 *
 * Eine Dropdown-Menü-Komponente für den Header, die verschiedene Aktionen anbietet.
 * Nutzt @expo/ui ContextMenu für native Menus auf iOS und Android.
 */
const HeaderMenu: React.FC<HeaderMenuProps> = () => {
  const router = useRouter();
  const { isDark } = useTheme();
  const { t } = useTranslation();

  // Initialize upload status store
  useInitializeUploadStatus();

  // Get count of unuploaded audio files
  const unuploadedCount = useUnuploadedCount();

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

  // Menu items
  const menuItems = useMemo(() => {
    // Build archive title with count if there are unuploaded files
    const archiveTitle = unuploadedCount > 0
      ? `${t('header_menu.audio_archive', 'Audio Archiv')} (${unuploadedCount})`
      : t('header_menu.audio_archive', 'Audio Archiv');

    return [
      // Organisation section
      {
        key: 'tags',
        title: t('menu.tags', 'Tags'),
        systemIcon: 'tag',
        onSelect: () => router.push('/(protected)/tags'),
      },
      {
        key: 'statistics',
        title: t('menu.statistics', 'Statistiken'),
        systemIcon: 'chart.bar',
        onSelect: () => router.push('/(protected)/statistics'),
      },

      // Recordings section
      {
        key: 'blueprints',
        title: t('menu.blueprints', 'Modi'),
        systemIcon: 'list.bullet.clipboard',
        onSelect: () => router.push('/(protected)/blueprints'),
      },
      {
        key: 'upload',
        title: t('header_menu.upload_audio', 'Audio hochladen'),
        systemIcon: 'icloud.and.arrow.up',
        onSelect: () => router.push('/(protected)/(tabs)/memos?openUploadModal=true'),
      },
      {
        key: 'archive',
        title: archiveTitle,
        systemIcon: 'waveform',
        onSelect: () => router.push('/(protected)/audio-archive'),
      },

      // Account section
      {
        key: 'subscription',
        title: t('menu.subscription', 'Abonnement'),
        systemIcon: 'drop.fill',
        onSelect: () => router.push('/(protected)/subscription'),
      },
      {
        key: 'settings',
        title: t('menu.settings', 'Einstellungen'),
        systemIcon: 'gear',
        onSelect: () => router.push('/(protected)/settings'),
      },
    ];
  }, [t, router, unuploadedCount]);

  return (
    <Host>
      <ContextMenu key={`menu-${unuploadedCount}`} style={{ padding: 12 }}>
        <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={{ paddingRight: -20, paddingTop: 16, paddingBottom: 8, paddingLeft: 12, position: 'relative' }}>
            <View style={{ transform: [{ rotate: '90deg' }] }}>
              <Icon
                name="ellipsis-vertical"
                size={24}
                color={iconColor}
              />
            </View>
            {unuploadedCount > 0 && (
              <NotificationBadge
                count={unuploadedCount}
                size="small"
                style={styles.badge}
              />
            )}
          </View>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
};

const styles = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: 12,
    right: -8,
    zIndex: 10,
  },
});

export default HeaderMenu;