import parserFactory from 'emogeez-parser';
import React from 'react';
import ReactDOM from 'react-dom';
import emojisComponents from 'emogeez-react-components';
 
const {
  EmojisPopupToggler,
} = emojisComponents;
const {
  store,
} = parserFactory();
 
const addEmojiToTextArea = (emoji /* the emoji data */, event /* click event */) => {
  // add the clicked emoji in the textarea or anywhere you want
};
 
fetchTheme('apple')
    .then(() => {
      const categories = Object.entries(store.getCategories('apple'));
      ReactDOM.render(
        <EmojisPopupToggler
          categories={categories}
          onClickEmoji={addEmojiToTextArea}
        />,
        document.getElementById('myContainer')
      );
    });

static propTypes = {
  // a prefix before the emoji name
  // it will construct the emoji classname
  // default will be emoji-grinning-face for example
  prefix: PropTypes.string,
  
  // the emoji data from the json
  emoji: PropTypes.object.isRequired,
  
  // on click on the emoji
  onClick: PropTypes.func,
};
static defaultProps = {
  prefix: 'emojis-',
  onClick: noop,
};

static propTypes = {
  // a prefix before the emoji name
  // it will construct the emoji classname
  // default will be emoji-grinning-face for example
  prefix: PropTypes.string,
    
  // an array of categories from the json file
  categories: PropTypes.array,
 
  // what to do on click on the emoji
  onClickEmoji: PropTypes.func,
  
  // choose to open it on first render
  isOpened: PropTypes.bool,
  
  // the popup can memorize the previously selected emojis
  // it is stored in the localStorage
  historyEnabled: PropTypes.bool,
  historyLimit: PropTypes.number,
  
  togglerRenderer: PropTypes.func,
  
  onOpen: PropTypes.func,
  onClose: PropTypes.func,
  
  // if you want the popup to be placed according to a parent
  // the popup will try to be contained in it
  containerClassNameForPlacement: PropTypes.string,
  
  // if you want to unmount the popup from the DOM
  // on the last toggler unmount
  // it means next time you render a new toggler
  // and if it's the only one,
  // then we re-render a popup
  destroyPopupIfNoToggler: PropTypes.bool,
};
static defaultProps = {
  prefix: 'emojis',
  categories: [],
  onClickEmoji: noop,
  isOpened: false,
  historyEnabled: true,
  historyLimit: 21,
  togglerRenderer: (props, state) => (
    <button>
      <People className={CLASSNAMES.icon} />
    </button>
  ),
  onOpen: noop,
  onClose: noop,
  containerClassNameForPlacement: null,
  destroyPopupIfNoToggler: false,
};

return 'enjoy';