import clsx from 'clsx'
import { useState, useEffect } from 'react'
import { Tooltip } from '~/components/ui/Tooltip'
import { trackEvent } from '~/utils'
import { usePlayerPageContext } from './context'
import { addToFavorite, getFavorites, removeFromFavorite } from './utils'

export const FavoriteButton = () => {
  const { player } = usePlayerPageContext()
  const [isFavorite, setIsFavorite] = useState(false)

  useEffect(() => {
    setIsFavorite(getFavorites().split(',').indexOf(player.name) !== -1)
  }, [])

  return (
    <Tooltip content={isFavorite ? 'Remove from favorites' : 'Add to favorites'}>
      <button
        className={clsx(
          'flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-gray-100 dark:hover:bg-zinc-700',
          isFavorite ? 'text-amber-400' : 'text-gray-300',
        )}
        onClick={() => {
          const newIsFavorite = !isFavorite

          if (newIsFavorite) {
            addToFavorite(player.name)
          } else {
            removeFromFavorite(player.name)
          }

          trackEvent(newIsFavorite ? 'Add favorite' : 'Remove favorite', {
            name: player.name,
          })

          setIsFavorite(newIsFavorite)
        }}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      </button>
    </Tooltip>
  )
}
