import { useMemo, useState } from 'react';
import { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';
export default {
    title: 'Core/EmojiPicker',
    component: EmojiPicker,
    args: {
        showFooter: false,
        emojiSize: 24,
        perLine: 9
    },
    argTypes: {
        showFooter: { control: { type: 'boolean' } },
        emojiSize: { control: { type: 'number' } },
        perLine: { control: { type: 'number' } }
    }
};
export const EmojiPickerDemo = (args) => {
    const [value, setValue] = useState('');
    const onEmojiSelect = (emoji) => {
        setValue(curr => `${curr}${emoji.native}`);
    };
    return (<Flex container={{ direction: 'column' }}>
      <Input value={value}/>
      <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
    </Flex>);
};
export const EmojiPickerExcludeDemo = (args) => {
    const [value, setValue] = useState('');
    const onEmojiSelect = (emoji) => {
        setValue(curr => `${curr}${emoji.native}`);
    };
    return (<Flex container={{ direction: 'column' }}>
      <Input value={value}/>
      <EmojiPicker exclude={['recent', 'people', 'foods', 'activity', 'flags']} showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
    </Flex>);
};
export const CustomEmojiSet = (args) => {
    const [value, setValue] = useState('');
    const onEmojiSelect = (emoji) => {
        setValue(curr => `${curr}${emoji.native}`);
    };
    const ctx = useMemo(() => ({
        set: 'google',
        spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
    }), []);
    return (<EmojiContext.Provider value={ctx}>
      <Flex container={{ direction: 'column' }}>
        <Input value={value}/>
        <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
      </Flex>
    </EmojiContext.Provider>);
};
//# sourceMappingURL=EmojiPicker.stories.jsx.map