"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSkinNative = getSkinNative;
exports.EmojiSuggestions = EmojiSuggestions;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_gesture_handler_1 = require("react-native-gesture-handler");
const __1 = require("../..");
const atoms_1 = require("../../lib/theme/atoms");
function getSkinNative(emoji, skinTone = 0) {
    return (emoji.s[skinTone] ?? emoji.s[0]).n;
}
function EmojiSuggestions({ emojis, onSelect, highlightedIndex, skinTone = 0, }) {
    if (!emojis || emojis.length === 0) {
        return null;
    }
    const itemRefs = (0, react_1.useRef)(new Map());
    (0, react_1.useEffect)(() => {
        if (react_native_1.Platform.OS === "web") {
            const el = itemRefs.current.get(highlightedIndex);
            if (el) {
                el.scrollIntoView({ behavior: "smooth", block: "nearest" });
            }
        }
    }, [highlightedIndex]);
    return ((0, jsx_runtime_1.jsx)(__1.View, { style: [
            atoms_1.bg.gray[800],
            atoms_1.layout.position.absolute,
            atoms_1.left[0],
            atoms_1.right[0],
            atoms_1.zIndex[50],
            {
                bottom: "100%",
                borderRadius: 8,
                boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
                maxHeight: 200,
            },
        ], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.ScrollView, { children: emojis.map((emoji, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => onSelect(emoji), ref: (ref) => {
                    const el = ref;
                    if (el)
                        itemRefs.current.set(index, el);
                }, style: [
                    {
                        padding: 8,
                        flexDirection: "row",
                        alignItems: "center",
                        backgroundColor: index === highlightedIndex
                            ? "rgba(255, 255, 255, 0.1)"
                            : "transparent",
                    },
                ], children: [(0, jsx_runtime_1.jsx)(__1.Text, { style: { fontSize: 16, marginRight: 8 }, children: getSkinNative(emoji, skinTone) }), (0, jsx_runtime_1.jsxs)(__1.Text, { style: { color: "white", fontSize: 14 }, children: [(0, jsx_runtime_1.jsxs)(__1.Code, { style: [atoms_1.bg.gray[950]], children: [":", emoji.id, ":"] }), " ", emoji.m] })] }, emoji.id))) }) }));
}
//# sourceMappingURL=emoji-suggestions.js.map