import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useContext, createContext, forwardRef } from 'react';
import { NimblePicker } from 'emoji-mart';
import { useTheme } from '../../hooks';
import StyledEmojiPicker from './EmojiPicker.styles';
export const EmojiContext = createContext({});
const emojiDataMap = {
    all: () => import('emoji-mart/data/all.json'),
    apple: () => import('emoji-mart/data/apple.json'),
    google: () => import('emoji-mart/data/google.json'),
    facebook: () => import('emoji-mart/data/facebook.json'),
    twitter: () => import('emoji-mart/data/twitter.json')
};
const EmojiPicker = forwardRef(function EmojiPicker({ emojiSize = 24, perLine = 9, showFooter = true, exclude, onSelect, ...restProps }, ref) {
    const theme = useTheme();
    const { set, spriteSrcResolver, overrideData } = useContext(EmojiContext);
    const [data, setData] = useState(null);
    useEffect(() => {
        // Unmount NimblePicker for changes to take effect
        setData(null);
        setTimeout(async () => {
            if (overrideData) {
                setData(overrideData);
            }
            else {
                try {
                    const { default: emojiData } = await emojiDataMap[set ?? 'all']();
                    setData(emojiData);
                }
                catch (error) {
                    return null;
                }
            }
        }, 0);
    }, [set, overrideData]);
    return (data && (_jsx(StyledEmojiPicker, { ref: ref, showFooter: showFooter, style: { '--emoji-size': `${emojiSize}px` }, children: _jsx(NimblePicker, { ...restProps, set: set, native: !spriteSrcResolver, backgroundImageFn: spriteSrcResolver, data: data, emojiSize: emojiSize, perLine: perLine, exclude: exclude, onSelect: onSelect, color: theme.base.palette.interactive, emoji: '', title: '', emojiTooltip: true, showSkinTones: showFooter, showPreview: false }) })));
});
export default EmojiPicker;
//# sourceMappingURL=EmojiPicker.js.map