import React, { useState, useEffect, useRef } from 'react'

import Tooltip from './tooltip.js'

import styles from './reactButton.module.css'
import reactions from '../data/reactions.json'

function useOutsideAlerter(ref, action) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        action()
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [ref])
}

function ExistingReacts({ existingReacts, onClick, uid }) {
  return (
    <>
      {existingReacts &&
        Object.keys(existingReacts).map((key) => {
          const currReact = existingReacts[key]
          const react = reactions[key]
          if (!react) {
            return null
          }
          return (
            <span
              title={`'${key}': ${currReact.join(', ')}`}
              className={`${currReact.includes(uid) ? styles.reacted : ''}`}
              key={key}
              onClick={(e) => {
                e.stopPropagation()
                onClick(key, currReact.includes(uid))
              }}
            >
              {react.emoji} {currReact.length}
            </span>
          )
        })}
    </>
  )
}

function RenderEmojis({ onClick }) {
  const [search, setSearch] = useState('')

  return (
    <>
      <input
        type="text"
        placeholder="Keresés..."
        onChange={(event) => {
          setSearch(event.target.value)
        }}
      />
      {Object.keys(reactions).map((key) => {
        const reaction = reactions[key]
        if (!key.includes(search.toLowerCase())) {
          return null
        }
        return (
          <div
            title={key}
            key={key}
            onClick={() => {
              onClick(key)
            }}
          >
            {reaction.emoji}
          </div>
        )
      })}
    </>
  )
}

export default function ReactButton({ onClick, existingReacts, uid }) {
  const [opened, setOpened] = useState(false)
  const wrapperRef = useRef(null)
  useOutsideAlerter(wrapperRef, () => {
    setOpened(false)
  })

  return (
    <>
      <Tooltip
      width={300}
      height={250}
        text={() => {
          return (
            <span
              onClick={() => {
                setOpened(true)
              }}
            >
              Reakció
            </span>
          )
        }}
        opened={opened}
      >
        <div ref={wrapperRef} className={styles.reactionContainer}>
          <RenderEmojis
            onClick={(e) => {
              // setOpened(false)
              onClick(e)
            }}
          />
        </div>
      </Tooltip>
      <ExistingReacts
        uid={uid}
        onClick={(key, isDelete) => {
          onClick(key, isDelete)
          setOpened(false)
        }}
        existingReacts={existingReacts}
      />
    </>
  )
}