rebreak-monorepo/apps/rebreak-native/components/WheelPickerModal.tsx

/**
 * WheelPickerModal — iOS-native UIPickerView style wheel via @react-native-picker/picker.
 *
 * Pattern:
 *   1. User taps a row → setVisible(true)
 *   2. Modal slides up bottom-sheet with native iOS wheel + Done/Cancel
 *   3. Wheel scrolls through options, current selection highlighted
 *   4. User taps "Fertig" → onSelect(value), modal closes
 *   5. User taps "Abbrechen" or outside → modal closes without change
 *
 * Use für: lange Listen (Geburtsjahr 91 items, Bundesland 16, Stadt 30-50/Bundesland).
 * Für kurze Listen (3-7 items) bleibt ActionSheet besser (siehe useNativeActionSheet).
 */
import { useEffect, useState } from 'react';
import { Modal, View, Text, Pressable, TouchableOpacity } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useColors } from '../lib/theme';

type Option<T> = { value: T; label: string };

type Props<T extends string | number> = {
  visible: boolean;
  title: string;
  options: Option<T>[];
  value: T | null;
  onSelect: (value: T) => void;
  onClose: () => void;
};

export function WheelPickerModal<T extends string | number>({
  visible,
  title,
  options,
  value,
  onSelect,
  onClose,
}: Props<T>) {
  const colors = useColors();
  // Tracks the wheel's current selection (separate from confirmed value).
  // Initialized from `value` prop on each open.
  const [tempValue, setTempValue] = useState<T | null>(value);

  useEffect(() => {
    if (visible) {
      // First-open default: if no current value, pick first option.
      setTempValue(value ?? options[0]?.value ?? null);
    }
  }, [visible, value, options]);

  function handleConfirm() {
    if (tempValue !== null && tempValue !== undefined) {
      onSelect(tempValue);
    }
    onClose();
  }

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
    >
      <Pressable
        onPress={onClose}
        style={{
          flex: 1,
          // Kein darkening (User-Regel) — backdrop nur als Tap-to-close-Layer
          backgroundColor: 'transparent',
          justifyContent: 'flex-end',
        }}
      >
        <Pressable onPress={() => {}}>
          <View
            style={{
              backgroundColor: colors.bg,
              borderTopLeftRadius: 18,
              borderTopRightRadius: 18,
              paddingBottom: 24,
            }}
          >
            {/* Header: Cancel / Title / Done */}
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingHorizontal: 16,
                paddingVertical: 12,
                borderBottomWidth: 1,
                borderBottomColor: colors.border,
              }}
            >
              <TouchableOpacity activeOpacity={0.7} onPress={onClose} hitSlop={10}>
                <Text
                  style={{
                    fontSize: 15,
                    color: colors.textMuted,
                    fontFamily: 'Nunito_400Regular',
                  }}
                >
                  Abbrechen
                </Text>
              </TouchableOpacity>
              <Text
                style={{
                  fontSize: 15,
                  color: colors.text,
                  fontFamily: 'Nunito_700Bold',
                }}
              >
                {title}
              </Text>
              <TouchableOpacity activeOpacity={0.7} onPress={handleConfirm} hitSlop={10}>
                <Text
                  style={{
                    fontSize: 15,
                    color: colors.brandOrange,
                    fontFamily: 'Nunito_700Bold',
                  }}
                >
                  Fertig
                </Text>
              </TouchableOpacity>
            </View>

            {/* Wheel — native iOS UIPickerView */}
            <Picker
              selectedValue={tempValue ?? undefined}
              onValueChange={(v) => setTempValue(v as T)}
              style={{ width: '100%' }}
              itemStyle={{ fontSize: 18, color: colors.text }}
            >
              {options.map((opt) => (
                <Picker.Item
                  key={String(opt.value)}
                  label={opt.label}
                  value={opt.value}
                />
              ))}
            </Picker>
          </View>
        </Pressable>
      </Pressable>
    </Modal>
  );
}