import { useState } from 'react'
import { getActiveClasses } from 'get-active-classes'
import Popover from '@material-ui/core/Popover'
import { useAuth } from '@redwoodjs/auth'

import Svg from 'src/components/Svg'

const emojiMenu = ['❤️', '👍', '😄', '🙌']
// const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
const noEmotes = [
  {
    emoji: '❤️',
    count: 0,
  },
]

const textShadow = { textShadow: '0 4px 6px rgba(0, 0, 0, 0.3)' }

const EmojiReaction = ({
  emotes,
  userEmotes,
  onEmote = () => {},
  onShowPartReactions,
  className,
}) => {
  const { currentUser } = useAuth()
  const [isOpen, setIsOpen] = useState(false)
  const [anchorEl, setAnchorEl] = useState(null)
  const [popoverId, setPopoverId] = useState(undefined)

  const openPopover = (target) => {
    setAnchorEl(target)
    setPopoverId('simple-popover')
    setIsOpen(true)
  }

  const closePopover = () => {
    setAnchorEl(null)
    setPopoverId(undefined)
    setIsOpen(false)
  }

  const togglePopover = ({ currentTarget }) => {
    if (isOpen) {
      return closePopover()
    }

    openPopover(currentTarget)
  }

  const handleEmojiClick = (emoji) => {
    // TODO handle user not signed in better, maybe open up a modal, I danno think about it.
    currentUser && onEmote(emoji)
    closePopover()
  }

  return (
    <>
      <div
        className={getActiveClasses(
          'h-10 relative overflow-hidden py-4',
          className
        )}
      >
        <div className="absolute left-0 w-8 inset-y-0 z-10 flex items-center bg-gray-100">
          <div
            className="h-8 w-8 relative"
            aria-describedby={popoverId}
            onClick={togglePopover}
          >
            <button className="bg-gray-200 border-2 m-px w-full h-full border-gray-300 rounded-full flex justify-center items-center shadow-md hover:shadow-lg hover:border-indigo-200 transform hover:-translate-y-px transition-all duration-150">
              <Svg
                className="h-8 w-8 pt-px mt-px text-gray-500"
                name="dots-vertical"
              />
            </button>
          </div>
        </div>

        <div className="whitespace-no-wrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
          {(emotes.length ? emotes : noEmotes).map((emote, i) => (
            <span
              className={getActiveClasses(
                'rounded-full tracking-wide hover:bg-indigo-100 p-1 mx-px transform hover:-translate-y-px transition-all duration-150 border-indigo-400',
                { border: currentUser && userEmotes?.includes(emote.emoji) }
              )}
              style={textShadow}
              key={`${emote.emoji}--${i}`}
              onClick={() => handleEmojiClick(emote.emoji)}
            >
              <span className="text-lg pr-1">{emote.emoji}</span>
              <span className="text-sm font-ropa-sans">{emote.count}</span>
            </span>
          ))}
        </div>
      </div>
      <Popover
        id={popoverId}
        open={isOpen}
        anchorEl={anchorEl}
        onClose={closePopover}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <div className="p-2 pr-3 flex flex-col">
          <div className="inline-flex">
            {emojiMenu.map((emoji, i) => (
              <button
                className="p-2"
                style={textShadow}
                key={`${emoji}-${i}}`}
                onClick={() => handleEmojiClick(emoji)}
              >
                {emoji}
              </button>
            ))}
          </div>
          <button className="text-gray-700" onClick={onShowPartReactions}>
            View Reactions
          </button>
        </div>
      </Popover>
    </>
  )
}

export default EmojiReaction