import { jsx as _jsx } from "react/jsx-runtime";
import data from "@emoji-mart/data";
import Picker from "@emoji-mart/react";
import React, { useEffect, useRef } from "react";
export function EmojiPicker({ open, isMobile, anchorRef, onSelect, onClose, }) {
    const panelRef = useRef(null);
    useEffect(() => {
        if (!open) {
            return;
        }
        const onPointerDown = (event) => {
            const target = event.target;
            if (target &&
                panelRef.current?.contains(target)) {
                return;
            }
            if (target &&
                anchorRef.current?.contains(target)) {
                return;
            }
            onClose();
        };
        document.addEventListener("mousedown", onPointerDown);
        return () => document.removeEventListener("mousedown", onPointerDown);
    }, [anchorRef, onClose, open]);
    if (!open) {
        return null;
    }
    const handleSelect = (emoji) => {
        if (!emoji.native) {
            return;
        }
        onSelect(emoji.native);
        onClose();
    };
    if (isMobile) {
        return (_jsx("div", { style: {
                position: "absolute",
                left: 0,
                right: 0,
                bottom: "calc(100% + 10px)",
                zIndex: 40,
            }, children: _jsx("div", { ref: panelRef, style: {
                    overflow: "hidden",
                    borderRadius: 22,
                    border: "1px solid rgba(109, 74, 255, 0.12)",
                    background: "#FFFFFF",
                    boxShadow: "0 16px 44px rgba(38, 22, 92, 0.18)",
                }, children: _jsx(Picker, { data: data, previewPosition: "none", navPosition: "bottom", maxFrequentRows: 1, perLine: 8, emojiSize: 24, onEmojiSelect: handleSelect }) }) }));
    }
    return (_jsx("div", { ref: panelRef, style: {
            position: "absolute",
            right: 0,
            bottom: "calc(100% + 12px)",
            zIndex: 40,
            overflow: "hidden",
            borderRadius: 18,
            border: "1px solid rgba(109, 74, 255, 0.12)",
            background: "#FFFFFF",
            boxShadow: "0 16px 44px rgba(38, 22, 92, 0.18)",
        }, children: _jsx(Picker, { data: data, previewPosition: "none", perLine: 9, emojiSize: 20, onEmojiSelect: handleSelect }) }));
}
