import React, { useEffect, useState } from 'react'
import axios from 'axios'
import ReactionBar from '../comments/ReactionBar'

/**
 * Loads and displays reactions for a single artwork.
 *
 * Props:
 *   artworkId    number
 *   isLoggedIn   boolean
 */
export default function ArtworkReactions({ artworkId, isLoggedIn = false }) {
  const [totals, setTotals]   = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (!artworkId) return
    axios
      .get(`/api/artworks/${artworkId}/reactions`)
      .then(({ data }) => setTotals(data.totals ?? {}))
      .catch(() => setTotals({}))
      .finally(() => setLoading(false))
  }, [artworkId])

  if (loading) return null

  if (!totals || Object.values(totals).every((r) => r.count === 0) && !isLoggedIn) {
    return null
  }

  return (
    <div className="mt-3">
      <ReactionBar
        entityType="artwork"
        entityId={artworkId}
        initialTotals={totals}
        isLoggedIn={isLoggedIn}
      />
    </div>
  )
}