import React from 'react';
import {
  View,
  Pressable,
  StyleSheet,
  Image,
  Text,
  ImageSourcePropType,
  ViewStyle,
} from 'react-native';
import { Spacing, Typography, BorderRadius } from '@/constants/theme';
import { useThemeColor } from '@/hooks/use-theme-color';

type IconSource = string | ImageSourcePropType; // either string or a svg

// Specialized variant with labels below
interface MoodSelectorProps {
  items: Array<{
    id: string;
    icon: IconSource;
    label: string;
  }>;
  value?: string;
  onSelect: (id: string) => void;
  disabled?: boolean;
  style?: ViewStyle;
}

export const MoodSelector: React.FC<MoodSelectorProps> = ({
  items,
  value,
  onSelect,
  disabled = false,
  style,
}) => {
  const accentBlueColor = useThemeColor({}, 'accentBlue');
  const tintColor = useThemeColor({}, 'tint');
  const surfaceColor = useThemeColor({}, 'surface');
  const dividerColor = useThemeColor({}, 'divider');
  const textSecondaryColor = useThemeColor({}, 'textSecondary');

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      gap: Spacing.inlineGapSm,
      justifyContent: 'space-around',
      alignItems: 'flex-start',
      flexWrap: 'wrap',
    },
    itemWrapper: {
      alignItems: 'center',
      gap: 8,
      flex: 1,
      minWidth: '8%',
    },
    itemButton: {
      width: 50,
      height: 50,
      borderRadius: BorderRadius.lg,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: surfaceColor,
      borderWidth: 1,
      borderColor: dividerColor,
    },
    itemButtonActive: {
      backgroundColor: accentBlueColor,
      borderColor: 'transparent',
    },
    icon: {
      fontSize: 48,
      lineHeight: 48,
    },
    emojiText: {
      fontSize: 36,
      lineHeight: 40,
    },
    label: {
      fontSize: Typography.labelSm.fontSize,
      fontWeight: '500',
      color: textSecondaryColor,
      textAlign: 'center',
    },
  });

  const isEmoji = (icon: IconSource): icon is string => typeof icon === 'string';

  return (
    <View style={[styles.container, style]}>
      {items.map((item) => {
        const isSelected = value === item.id;

        return (
          <View key={item.id} style={styles.itemWrapper}>
            <Pressable
              onPress={() => !disabled && onSelect(item.id)}
              disabled={disabled}
              style={({ pressed }) => [
                styles.itemButton,
                isSelected && styles.itemButtonActive,
                pressed && !disabled && { opacity: 0.7 },
                disabled && { opacity: 0.5 },
              ]}
            >
              {isEmoji(item.icon) ? (
                <Text style={styles.emojiText}>{item.icon}</Text>
              ) : (
                <Image
                  source={item.icon}
                  style={{
                    width: 48,
                    height: 48,
                  }}
                  resizeMode="contain"
                />
              )}
            </Pressable>
            <Text style={styles.label}>{item.label}</Text>
          </View>
        );
      })}
    </View>
  );
};