224 lines
9.2 KiB
React
224 lines
9.2 KiB
React
import React, { useEffect } from "react"
|
|
import {
|
|
FaUser,
|
|
FaLock,
|
|
FaGlobe,
|
|
FaTags,
|
|
FaCalendarAlt,
|
|
FaQuestionCircle,
|
|
FaComment,
|
|
FaTimes,
|
|
FaEdit
|
|
} from "react-icons/fa"
|
|
|
|
export default function DeckInfoPopUp({ deck, onClose }) {
|
|
if (!deck) return null
|
|
|
|
// Debug: Log the deck structure to see what we're working with
|
|
console.log('Deck in popup:', deck)
|
|
console.log('Cards:', deck.cards)
|
|
|
|
// 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'
|
|
}
|
|
}, [])
|
|
|
|
const deckTypes = {
|
|
"Luck": { label: "Szerencse", color: "var(--color-luck)" },
|
|
"Question": { label: "Kérdés", color: "var(--color-question)" },
|
|
"Fun": { label: "Szórakozás", color: "var(--color-fun)" }
|
|
}
|
|
|
|
const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
|
|
|
|
// Use real deck data with safe fallbacks
|
|
const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
|
|
const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
|
|
|
|
// Get data from raw if available
|
|
const rawData = deck.raw || deck
|
|
|
|
// Use played number from raw data for answers count
|
|
const questionsCount = rawData.cardCount || 0
|
|
const answersCount = rawData.playedNumber || 0
|
|
|
|
console.log('Calculated counts:', { questionsCount, answersCount, rawData })
|
|
|
|
const mockData = {
|
|
...deck,
|
|
creator,
|
|
privacy,
|
|
questionsCount,
|
|
answersCount
|
|
}
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('hu-HU', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
|
|
const handleOpenDeck = () => {
|
|
alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
|
|
}
|
|
|
|
const handleEditDeck = () => {
|
|
alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!")
|
|
}
|
|
|
|
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: currentDeckType.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: currentDeckType.color,
|
|
color: "var(--color-text-inverse)",
|
|
}}
|
|
>
|
|
{currentDeckType.label}
|
|
</span>
|
|
</div>
|
|
</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: `${currentDeckType.color}20` }}
|
|
>
|
|
<FaTags style={{ color: currentDeckType.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">{currentDeckType.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">
|
|
{/* Questions */}
|
|
<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érdések</div>
|
|
<div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Answers */}
|
|
<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">Válaszok</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>
|
|
)
|
|
} |