import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";

import Colors from "@/constants/colors";
import { MOOD_OPTIONS, type DemoMood } from "@/lib/demo-ledger";
import { hapticSelection } from "@/lib/ui/haptics";

interface MoodPickerProps {
  value: DemoMood | undefined;
  onChange: (mood: DemoMood | undefined) => void;
}

// Mood Notes - tapping a chip again clears it, since "no mood" is a valid
// choice too and shouldn't require a separate "clear" button.
export function MoodPicker({ value, onChange }: MoodPickerProps) {
  return (
    <View>
      <Text style={styles.label}>Mood (optional)</Text>
      <ScrollView horizontal showsHorizontalScrollIndicator={scrollViewWebProps.showsHorizontalScrollIndicator} contentContainerStyle={styles.row}>
        {MOOD_OPTIONS.map((mood) => {
          const active = value === mood.key;
          return (
            <TouchableOpacity
              key={mood.key}
              style={[styles.chip, active && styles.chipActive]}
              onPress={() => {
                hapticSelection();
                onChange(active ? undefined : mood.key);
              }}
              activeOpacity={0.8}
            >
              <Text style={styles.chipEmoji}>{mood.emoji}</Text>
              <Text style={[styles.chipLabel, active && styles.chipLabelActive]}>{mood.label}</Text>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  label: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
    marginBottom: 10,
    textTransform: "uppercase" as const,
    letterSpacing: 0.5,
  },
  row: {
    gap: 8,
    paddingRight: 4,
  },
  chip: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 6,
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  chipActive: {
    borderColor: Colors.dark.primary,
    backgroundColor: `${Colors.dark.primary}1A`,
  },
  chipEmoji: {
    fontSize: 15,
  },
  chipLabel: {
    fontSize: 13,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  chipLabelActive: {
    color: Colors.dark.primary,
  },
});