import React, { useState } from 'react'

import Tooltip from './tooltip.js'

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

function ExistingReacts({ existingReacts, onClick, uid }) {
  return (
    <div className={styles.reactionContainer}>
      <div>React</div>
      {existingReacts &&
        Object.keys(existingReacts).map((key) => {
          const currReact = existingReacts[key]
          const react = reactions[key]
          if (!react) {
            return null
          }
          return (
            <div
              title={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)

  return (
    <div
      className={styles.reactContainer}
      onClick={() => {
        setOpened(true)
      }}
      onMouseEnter={() => {}}
      onMouseLeave={() => {
        setOpened(false)
      }}
    >
      <Tooltip
        opened={opened}
        text={() => (
          <ExistingReacts
            uid={uid}
            onClick={(key, isDelete) => {
              onClick(key, isDelete)
              setOpened(false)
            }}
            existingReacts={existingReacts}
          />
        )}
      >
        <div className={styles.reactionContainer}>
          <RenderEmojis
            onClick={(e) => {
              // setOpened(false)
              onClick(e)
            }}
          />
        </div>
      </Tooltip>
    </div>
  )
}