280 lines
10 KiB
React
280 lines
10 KiB
React
import React, { useEffect } from "react"
|
||
import { useNavigate } from "react-router-dom"
|
||
import {
|
||
FaUser,
|
||
FaLock,
|
||
FaGlobe,
|
||
FaTags,
|
||
FaCalendarAlt,
|
||
FaQuestionCircle,
|
||
FaComment,
|
||
FaTimes,
|
||
FaEdit
|
||
} from "react-icons/fa"
|
||
|
||
export default function DeckInfoPopUp({ deck, onClose }) {
|
||
const navigate = useNavigate()
|
||
|
||
if (!deck) return null
|
||
|
||
// Debug: Log the deck structure to see what we're working with
|
||
console.log('Deck in popup:', deck)
|
||
console.log('Raw deck data:', deck.raw)
|
||
|
||
// Scroll blokkolás amikor a popup nyitva van
|
||
useEffect(() => {
|
||
// Scroll letiltása
|
||
document.body.style.overflow = 'hidden'
|
||
|
||
// Cleanup function - scroll visszaállítása amikor a komponens unmount-ol
|
||
return () => {
|
||
document.body.style.overflow = 'unset'
|
||
}
|
||
}, [])
|
||
|
||
// Backend enum mapping
|
||
const deckTypeMapping = {
|
||
0: { label: "Szerencse", color: "var(--color-luck)" }, // LUCK
|
||
1: { label: "Joker", color: "var(--color-fun)" }, // JOKER
|
||
2: { label: "Kérdés", color: "var(--color-question)" } // QUESTION
|
||
}
|
||
|
||
const ctypeMapping = {
|
||
0: "Publikus", // PUBLIC
|
||
1: "Privát", // PRIVATE
|
||
2: "Vállalati" // ORGANIZATION
|
||
}
|
||
|
||
const stateMapping = {
|
||
0: "Aktív", // ACTIVE
|
||
1: "Törölt" // SOFT_DELETE
|
||
}
|
||
|
||
// Get data from raw (backend data)
|
||
const rawData = deck.raw || deck
|
||
|
||
// Type info
|
||
const deckTypeInfo = deckTypeMapping[rawData.type] || { label: "Ismeretlen", color: "var(--color-success)" }
|
||
|
||
// Privacy/CType
|
||
const privacy = ctypeMapping[rawData.ctype] || "Ismeretlen"
|
||
|
||
// State
|
||
const state = stateMapping[rawData.state] || "Ismeretlen"
|
||
|
||
// Creator
|
||
const creator = rawData.user?.name || rawData.creatorName || rawData.creator || "Ismeretlen"
|
||
|
||
// Card count
|
||
const cardCount = rawData.cardCount || 0
|
||
|
||
// Played count
|
||
const playedNumber = rawData.playedNumber || 0
|
||
|
||
console.log('Mapped data:', {
|
||
type: rawData.type,
|
||
deckTypeInfo,
|
||
ctype: rawData.ctype,
|
||
privacy,
|
||
state,
|
||
cardCount,
|
||
playedNumber
|
||
})
|
||
|
||
const mockData = {
|
||
name: rawData.name || deck.name || "Névtelen pakli",
|
||
creator,
|
||
privacy,
|
||
state,
|
||
questionsCount: cardCount,
|
||
answersCount: playedNumber,
|
||
created: rawData.creationdate || rawData.created || deck.created || new Date().toISOString(),
|
||
description: rawData.description || ""
|
||
}
|
||
|
||
const formatDate = (dateString) => {
|
||
try {
|
||
const date = new Date(dateString)
|
||
return date.toLocaleDateString('hu-HU', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
})
|
||
} catch (e) {
|
||
return dateString
|
||
}
|
||
}
|
||
|
||
const handleOpenDeck = () => {
|
||
// TODO: Megnyitás funkció - később implementálható
|
||
alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
|
||
}
|
||
|
||
const handleEditDeck = () => {
|
||
// Get the deck ID from raw data
|
||
const deckId = rawData.id || deck.id
|
||
|
||
if (!deckId) {
|
||
alert("⚠️ Hiba: A pakli azonosítója nem található!")
|
||
return
|
||
}
|
||
|
||
// Navigate to deck creator with the deck ID
|
||
navigate(`/deck-creator/${deckId}`)
|
||
|
||
// Close the popup
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
|
||
<div
|
||
className="bg-[color:var(--color-surface)] rounded-3xl shadow-2xl min-w-[350px] max-w-[420px] w-full mx-4 relative border border-[color:var(--color-surface-selected)] overflow-hidden"
|
||
style={{
|
||
background: `linear-gradient(135deg, var(--color-surface) 0%, var(--color-card) 100%)`
|
||
}}
|
||
>
|
||
{/* Header with deck type color */}
|
||
<div
|
||
className="h-2 w-full"
|
||
style={{ backgroundColor: deckTypeInfo.color }}
|
||
></div>
|
||
|
||
{/* Close button */}
|
||
<button
|
||
onClick={onClose}
|
||
className="absolute top-4 right-4 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-text)] text-xl font-bold leading-none p-2 rounded-full hover:bg-[color:var(--color-surface-selected)] transition-all duration-200"
|
||
aria-label="Bezárás"
|
||
>
|
||
<FaTimes />
|
||
</button>
|
||
|
||
<div className="p-6">
|
||
{/* Deck name and type */}
|
||
<div className="mb-5">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
|
||
{mockData.name}
|
||
</h2>
|
||
<span
|
||
className="inline-block px-3 py-1 rounded-full text-xs font-bold"
|
||
style={{
|
||
background: deckTypeInfo.color,
|
||
color: "var(--color-text-inverse)",
|
||
}}
|
||
>
|
||
{deckTypeInfo.label}
|
||
</span>
|
||
</div>
|
||
{mockData.description && (
|
||
<p className="text-[color:var(--color-text-muted)] text-sm">
|
||
{mockData.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Data grid */}
|
||
<div className="grid grid-cols-1 gap-3">
|
||
{/* Creator */}
|
||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-success)]/20">
|
||
<FaUser className="text-[color:var(--color-success)] text-sm" />
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozó</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.creator}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Privacy */}
|
||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-warning)]/20">
|
||
{mockData.privacy === "Privát" ? (
|
||
<FaLock className="text-[color:var(--color-warning)] text-sm" />
|
||
) : (
|
||
<FaGlobe className="text-[color:var(--color-warning)] text-sm" />
|
||
)}
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Láthatóság</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{mockData.privacy}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Type */}
|
||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div
|
||
className="flex items-center justify-center w-8 h-8 rounded-full"
|
||
style={{ backgroundColor: `${deckTypeInfo.color}20` }}
|
||
>
|
||
<FaTags style={{ color: deckTypeInfo.color }} className="text-sm" />
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Típus</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{deckTypeInfo.label}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Date */}
|
||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-primary)]/20">
|
||
<FaCalendarAlt className="text-[color:var(--color-primary)] text-sm" />
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Létrehozás dátuma</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{formatDate(mockData.created)}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Questions and Answers in one row */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Card Count (Kártyák) */}
|
||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-question)]/20">
|
||
<FaQuestionCircle className="text-[color:var(--color-question)] text-sm" />
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kártyák</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Played Count (Játszva) */}
|
||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-fun)]/20">
|
||
<FaComment className="text-[color:var(--color-fun)] text-sm" />
|
||
</div>
|
||
<div>
|
||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Játszva</div>
|
||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}×</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div className="mt-5 pt-4 border-t border-[color:var(--color-surface-selected)]">
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Open button */}
|
||
<button
|
||
className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text-inverse)] transition-all duration-200 hover:scale-105 shadow-lg bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80"
|
||
onClick={handleOpenDeck}
|
||
>
|
||
Megnyitás
|
||
</button>
|
||
|
||
{/* Edit button */}
|
||
<button
|
||
className="px-4 py-2.5 rounded-xl font-semibold text-[color:var(--color-text)] border border-[color:var(--color-surface-selected)] transition-all duration-200 hover:scale-105 hover:bg-[color:var(--color-surface-selected)] flex items-center justify-center gap-2"
|
||
onClick={handleEditDeck}
|
||
>
|
||
<FaEdit className="text-sm" />
|
||
Szerkesztés
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |