managarten/picture/apps/mobile/components/ViewToggle.tsx

import { View, ViewStyle, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { FAB } from './FAB';
import { Text } from './Text';
import { useTheme } from '~/contexts/ThemeContext';

type ViewMode = 'single' | 'grid3' | 'grid5';

type ViewToggleProps = {
  mode: ViewMode;
  onModeChange: (mode: ViewMode) => void;
  bottom?: number;
  left?: number;
  right?: number;
  style?: ViewStyle;
};

export function ViewToggle({ mode, onModeChange, bottom = 100, left, right, style }: ViewToggleProps) {
  const { theme } = useTheme();

  const cycleMode = () => {
    // Cycle through: single -> grid3 -> grid5 -> single
    const modeOrder: ViewMode[] = ['single', 'grid3', 'grid5'];
    const currentIndex = modeOrder.indexOf(mode);
    const nextIndex = (currentIndex + 1) % modeOrder.length;
    onModeChange(modeOrder[nextIndex]);
  };

  // Get icon based on current mode
  const getIcon = () => {
    switch (mode) {
      case 'single':
        return 'square';
      case 'grid3':
        return 'grid';
      case 'grid5':
        return 'apps';
      default:
        return 'grid';
    }
  };

  // If style is provided, render as inline toggle buttons
  if (style) {
    const modes: { mode: ViewMode; icon: keyof typeof Ionicons.glyphMap; label: string }[] = [
      { mode: 'single', icon: 'square', label: 'Einzeln' },
      { mode: 'grid3', icon: 'grid', label: '3x3' },
      { mode: 'grid5', icon: 'apps', label: '5x5' },
    ];

    return (
      <View style={[{ flexDirection: 'row', gap: 8 }, style]}>
        {modes.map(({ mode: viewMode, icon, label }) => {
          const isSelected = mode === viewMode;

          return (
            <Pressable
              key={viewMode}
              onPress={() => onModeChange(viewMode)}
              style={{
                backgroundColor: isSelected ? theme.colors.primary.default : theme.colors.input.background,
                borderColor: isSelected ? theme.colors.primary.default : theme.colors.border,
                borderWidth: 1,
                flex: 1,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                paddingVertical: 12,
                paddingHorizontal: 16,
                borderRadius: 12,
              }}
            >
              <Ionicons
                name={icon}
                size={20}
                color={isSelected ? theme.colors.primary.contrast : theme.colors.text.secondary}
                style={{ marginRight: 8 }}
              />
              <Text
                style={{
                  color: isSelected ? theme.colors.primary.contrast : theme.colors.text.primary,
                  fontWeight: '500',
                }}
              >
                {label}
              </Text>
            </Pressable>
          );
        })}
      </View>
    );
  }

  // Otherwise, render as FAB
  return (
    <FAB
      icon={getIcon()}
      onPress={cycleMode}
      bottom={bottom}
      left={left}
      right={right}
      color={theme.colors.surface}
    />
  );
}