managarten/manadeck/apps/mobile/components/ui/ThemeSwitcher.tsx

import React from 'react';
import { View, Pressable } from 'react-native';
import { Text } from './Text';
import { Icon } from './Icon';
import { useTheme } from '~/components/ThemeProvider';
import { themeList, themes } from '~/themes';
import { ThemeName, ThemeMode } from '~/types/theme';
import { useThemeColors } from '~/utils/themeUtils';
import { spacing } from '~/utils/spacing';

export function ThemeSwitcher() {
  const { theme, mode, setTheme, setMode } = useTheme();
  const colors = useThemeColors();

  const modeOptions: { value: ThemeMode; label: string; icon: string }[] = [
    { value: 'light', label: 'Hell', icon: 'sunny' },
    { value: 'dark', label: 'Dunkel', icon: 'moon' },
    { value: 'system', label: 'System', icon: 'phone-portrait' },
  ];

  return (
    <View style={{ padding: spacing.lg }}>
      {/* Theme Selection */}
      <View style={{ marginBottom: spacing.content.title }}>
        <Text style={{
          fontSize: 14,
          fontWeight: '600',
          color: colors.mutedForeground,
          marginBottom: spacing.content.small,
          textTransform: 'uppercase',
          letterSpacing: 0.5
        }}>
          Farbschema
        </Text>
        <View style={{ gap: spacing.content.small }}>
          {themeList.map((themeItem) => {
            const isSelected = theme === themeItem.name;
            const themeColors = mode === 'dark' || (mode === 'system' && colors.background === 'rgb(3, 7, 18)')
              ? themes[themeItem.name as ThemeName].dark
              : themes[themeItem.name as ThemeName].light;

            return (
              <Pressable
                key={themeItem.name}
                onPress={() => setTheme(themeItem.name as ThemeName)}
                style={({ pressed }) => ({
                  flexDirection: 'row',
                  alignItems: 'center',
                  padding: spacing.content.small,
                  borderRadius: 12,
                  borderWidth: 2,
                  borderColor: isSelected ? colors.primary : colors.border,
                  backgroundColor: isSelected ? `${colors.primary}10` : colors.surface,
                  opacity: pressed ? 0.7 : 1,
                })}>
                {/* Theme Preview Colors */}
                <View style={{ flexDirection: 'row', gap: 4, marginRight: spacing.content.small }}>
                  <View style={{
                    width: 24,
                    height: 24,
                    borderRadius: 6,
                    backgroundColor: `rgb(${themeColors.primary})`,
                    borderWidth: 1,
                    borderColor: colors.border,
                  }} />
                  <View style={{
                    width: 24,
                    height: 24,
                    borderRadius: 6,
                    backgroundColor: `rgb(${themeColors.accent})`,
                    borderWidth: 1,
                    borderColor: colors.border,
                  }} />
                  <View style={{
                    width: 24,
                    height: 24,
                    borderRadius: 6,
                    backgroundColor: `rgb(${themeColors.surface})`,
                    borderWidth: 1,
                    borderColor: colors.border,
                  }} />
                </View>

                {/* Theme Info */}
                <View style={{ flex: 1 }}>
                  <Text style={{
                    fontSize: 16,
                    fontWeight: '600',
                    color: colors.foreground,
                    marginBottom: 2
                  }}>
                    {themeItem.displayName}
                  </Text>
                  <Text style={{
                    fontSize: 13,
                    color: colors.mutedForeground
                  }}>
                    {themeItem.description}
                  </Text>
                </View>

                {/* Selection Indicator */}
                {isSelected && (
                  <Icon
                    name="checkmark-circle"
                    size={24}
                    color={colors.primary}
                    library="Ionicons"
                  />
                )}
              </Pressable>
            );
          })}
        </View>
      </View>

      {/* Mode Selection */}
      <View>
        <Text style={{
          fontSize: 14,
          fontWeight: '600',
          color: colors.mutedForeground,
          marginBottom: spacing.content.small,
          textTransform: 'uppercase',
          letterSpacing: 0.5
        }}>
          Helligkeit
        </Text>
        <View style={{
          flexDirection: 'row',
          backgroundColor: colors.muted,
          borderRadius: 10,
          padding: 4,
          gap: 4
        }}>
          {modeOptions.map((option) => {
            const isSelected = mode === option.value;
            return (
              <Pressable
                key={option.value}
                onPress={() => setMode(option.value)}
                style={({ pressed }) => ({
                  flex: 1,
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'center',
                  paddingVertical: spacing.content.small,
                  borderRadius: 8,
                  backgroundColor: isSelected ? colors.surface : 'transparent',
                  opacity: pressed ? 0.7 : 1,
                  ...(isSelected && {
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.1,
                    shadowRadius: 2,
                    elevation: 2,
                  }),
                })}>
                <Icon
                  name={option.icon}
                  size={18}
                  color={isSelected ? colors.primary : colors.mutedForeground}
                  library="Ionicons"
                  style={{ marginRight: 6 }}
                />
                <Text style={{
                  fontSize: 14,
                  fontWeight: isSelected ? '600' : '400',
                  color: isSelected ? colors.foreground : colors.mutedForeground
                }}>
                  {option.label}
                </Text>
              </Pressable>
            );
          })}
        </View>
      </View>
    </View>
  );
}