managarten/memoro/apps/mobile/components/atoms/SelectableItem.tsx

import React from 'react';
import { View, Pressable, StyleSheet, Platform } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from '~/components/atoms/Text';
import Icon from '~/components/atoms/Icon';

const tailwindConfig = require('../../tailwind.config.js');

interface SelectableItemProps {
  title: string;
  isSelected: boolean;
  onToggle: () => void;
  renderContent?: () => React.ReactNode;
}

/**
 * Eine wiederverwendbare Komponente für auswählbare Elemente mit Checkbox.
 * Kann für verschiedene Auswahlszenarien verwendet werden, z.B. in Bottom Sheets oder Listen.
 */
const SelectableItem = ({
  title,
  isSelected,
  onToggle,
  renderContent,
}: SelectableItemProps): React.ReactElement => {
  const { isDark, themeVariant } = useTheme();

  // Get theme background color
  const getThemeBackgroundColor = () => {
    try {
      if (tailwindConfig && tailwindConfig.theme && tailwindConfig.theme.extend && tailwindConfig.theme.extend.colors) {
        const colors = tailwindConfig.theme.extend.colors;
        
        if (isDark && colors.dark && colors.dark[themeVariant]) {
          return isSelected 
            ? colors.dark[themeVariant].contentBackgroundHover 
            : colors.dark[themeVariant].contentBackground;
        } else if (colors[themeVariant]) {
          return isSelected 
            ? colors[themeVariant].contentBackgroundHover 
            : colors[themeVariant].contentBackground;
        }
      }
      
      // Fallback
      return isSelected 
        ? (isDark ? 'rgba(60, 60, 60, 0.8)' : 'rgba(220, 220, 220, 0.8)')
        : (isDark ? 'rgba(40, 40, 40, 0.8)' : 'rgba(240, 240, 240, 0.8)');
    } catch (e) {
      console.debug('Error loading theme colors:', e);
      return isSelected 
        ? (isDark ? 'rgba(60, 60, 60, 0.8)' : 'rgba(220, 220, 220, 0.8)')
        : (isDark ? 'rgba(40, 40, 40, 0.8)' : 'rgba(240, 240, 240, 0.8)');
    }
  };

  // Get primary button color for checkbox
  const getPrimaryButtonColor = () => {
    try {
      if (tailwindConfig && tailwindConfig.theme && tailwindConfig.theme.extend && tailwindConfig.theme.extend.colors) {
        const colors = tailwindConfig.theme.extend.colors;
        
        if (isDark && colors.dark && colors.dark[themeVariant] && colors.dark[themeVariant].primaryButton) {
          return colors.dark[themeVariant].primaryButton;
        } else if (colors[themeVariant] && colors[themeVariant].primaryButton) {
          return colors[themeVariant].primaryButton;
        }
      }
      
      // Fallback
      return '#f8d62b';
    } catch (e) {
      console.debug('Error loading theme colors:', e);
      return '#f8d62b';
    }
  };
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: getThemeBackgroundColor(),
      borderRadius: 8,
      borderWidth: 1,
      borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.1,
      shadowRadius: 1,
      ...(Platform.OS !== 'android' && {
        elevation: 1,
      }),
      padding: 12,
    },
    checkbox: {
      width: 24,
      height: 24,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: isDark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)',
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 16,
    },
    checkboxSelected: {
      backgroundColor: getPrimaryButtonColor(),
      borderColor: getPrimaryButtonColor(),
    },
    contentContainer: {
      flex: 1,
    },
    title: {
      fontSize: 16,
      fontWeight: 'bold',
      color: isDark ? '#FFFFFF' : '#000000',
    },
  });
  
  return (
    <Pressable 
      style={styles.container}
      onPress={onToggle}
    >
      <View style={[
        styles.checkbox,
        isSelected && styles.checkboxSelected
      ]}>
        {isSelected && (
          <Icon name="checkmark" size={12} color="#FFFFFF" />
        )}
      </View>
      <View style={styles.contentContainer}>
        <Text 
          style={styles.title}
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {title}
        </Text>
        {renderContent && renderContent()}
      </View>
    </Pressable>
  );
};

export default SelectableItem;