import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useContext, createContext, forwardRef } from 'react';
import { NimblePicker } from 'emoji-mart';
import all from 'emoji-mart/data/all.json';
import apple from 'emoji-mart/data/apple.json';
import google from 'emoji-mart/data/google.json';
import twitter from 'emoji-mart/data/twitter.json';
import facebook from 'emoji-mart/data/facebook.json';
import { useTheme } from '../../hooks';
import StyledEmojiPicker from './EmojiPicker.styles';
export const EmojiContext = createContext({});
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(() => {
            if (overrideData) {
                setData(overrideData);
            }
            else {
                switch (set) {
                    case 'apple':
                        setData(apple);
                        break;
                    case 'google':
                        setData(google);
                        break;
                    case 'twitter':
                        setData(twitter);
                        break;
                    case 'facebook':
                        setData(facebook);
                        break;
                    default:
                        setData(all);
                        break;
                }
            }
        }, 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