import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Animated,
} from "react-native";

// const commonEmojis10 = [
//   "😂",
//   "❤️",
//   "🤣",
//   "😍",
//   "🙏",
//   "🥰",
//   "😊",
//   "😭",
//   "👍",
//   "😅",
// ];
const commonEmojis15 = [
  "😂",
  "❤️",
  "🤣",
  "😍",
  "🙏",
  "🥰",
  "😊",
  "😭",
  "👍",
  "😅",
  "😢",
  "👏",
  "💕",
  "🥺",
  "😘",
];
// const commonEmojis20 = [
//   "😂",
//   "❤️",
//   "🤣",
//   "😍",
//   "🙏",
//   "🥰",
//   "😊",
//   "😭",
//   "👍",
//   "😅",
//   "😢",
//   "👏",
//   "💕",
//   "🥺",
//   "😘",
//   "🤔",
//   "🤗",
//   "🙌",
//   "😎",
//   "✨",
// ];

interface EmojiSuggestionsProps {
  onEmojiClick: (emoji: string) => void;
}

const EmojiSuggestions: React.FC<EmojiSuggestionsProps> = ({
  onEmojiClick,
}) => {
  const [clickedEmoji, setClickedEmoji] = useState<string | null>(null);
  const [scaleAnim] = useState(new Animated.Value(1));
  const [emojiSubset, setEmojiSubset] = useState<string[]>([]);

  useEffect(() => {
    // Pick 8 random emojis from the array
    const shuffled = [...commonEmojis15].sort(() => 0.5 - Math.random());
    setEmojiSubset(shuffled.slice(0, 8));
  }, []);

  const handleEmojiClick = (emoji: string) => {
    setClickedEmoji(emoji);

    // Shrink animation
    Animated.sequence([
      Animated.timing(scaleAnim, {
        toValue: 0.8,
        duration: 100,
        useNativeDriver: true,
      }),
      Animated.timing(scaleAnim, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      }),
    ]).start(() => {
      setClickedEmoji(null);
    });

    onEmojiClick(emoji);
  };

  return (
    <View
      style={{
        borderBottomWidth: 0.5,
        borderBottomColor: "#e6e6e6",
        padding: 8,
        flexDirection: "row",
        justifyContent: "space-around", // Distribute emojis evenly
        alignItems: "center",
      }}
    >
      {emojiSubset.map((emoji) => (
        <TouchableOpacity
          key={emoji}
          onPress={() => handleEmojiClick(emoji)}
          activeOpacity={0.7}
        >
          <Animated.View
            style={{
              transform: [
                {
                  scale: clickedEmoji === emoji ? scaleAnim : 1,
                },
              ],
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text
              style={{
                fontSize: 24,
              }}
            >
              {emoji}
            </Text>
          </Animated.View>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default EmojiSuggestions;