import React, { useEffect, useRef } from 'react'
import { Picker } from 'emoji-mart'

const EMOJI_DATA_URL = 'https://cdn.jsdelivr.net/npm/@emoji-mart/data/sets/14/native.json'

function EmojiPicker(props) {
  const ref = useRef()

  const loadData = async () => {
    const response = await fetch(EMOJI_DATA_URL)
    return response.json()
  }

  useEffect(() => {
    // eslint-disable-next-line no-new
    new Picker({
      data: loadData,
      ref,
      title: '',
      emoji: '',
      theme: 'light',
      navPosition: 'none',
      previewPosition: 'none',
      maxFrequentRows: false,
      ...props,
    })
  }, [])

  return <div ref={ref} />
}

export default EmojiPicker