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 (
    <div className={styles.reactionContainer}>
      <div className={styles.react_bttn}>Reakció</div>
      {existingReacts &&
        Object.keys(existingReacts)
          .sort((akey, bkey) => {
            const a = existingReacts[akey]
            const b = existingReacts[bkey]
            return a.length < b.length
          })
          .map((key) => {
            const currReact = existingReacts[key]
            const react = reactions[key]
            if (!react) {
              return null
            }
            return (
              <div
                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}
              </div>
            )
          })}
    </div>
  )
}

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 (
    <div
      className={styles.reactContainer}
      onClick={() => {
        setOpened(true)
      }}
      onMouseLeave={() => {
        // setOpened(false)
      }}
    >
      <Tooltip
        opened={opened}
        text={() => (
          <ExistingReacts
            uid={uid}
            onClick={(key, isDelete) => {
              onClick(key, isDelete)
              setOpened(false)
            }}
            existingReacts={existingReacts}
          />
        )}
      >
        <div ref={wrapperRef} className={styles.reactionContainer}>
          <RenderEmojis
            onClick={(e) => {
              // setOpened(false)
              onClick(e)
            }}
          />
        </div>
      </Tooltip>
    </div>
  )
}