import styles from "./Event.module.css";
import {useState, useEffect} from "react";
import {Link} from "react-router";
import Button from "/src/components/ui/button/button.jsx"

function Event({event}){
    const [eventMenu, seteventMenu] = useState(false);
    const [windowSize, setWindowSize] = useState({
        width: null,
        height: null,
    });

    useEffect(() => {
        function handleResize() {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, []);




    return (
        <div className={`${styles.eventContainer} glassCard`}>
            <div className={styles.eventContainerTop}>
                <div className={styles.eventContent}>
                    <div className={`${styles.eventImageDiv}`}>
                        {event.image == null ? (
                            <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
                        ) : (
                            <img src={event.image + `.png`} alt="Photo de l'événement" />
                        )}
                    </div>
                    <div className={styles.eventInfos}>
                        <p className={styles.eventTitle}>{event.name}</p>
                        <p>{event.description}</p>
                        <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
                            <ul>
                                {event.tasks
                                    .slice(0,5)
                                    .map((task, index) => (
                                        <li key={index}> - {task.name}</li>
                                    ))}
                                {event.tasks.length > 5 ? (
                                    <li>...</li>
                                ) : null}
                            </ul>
                        </div>
                    </div>
                </div>
                {windowSize.width > 768 ? (
                    <div className={styles.eventButtons}>
                        <button
                            className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
                            onClick={()=>{seteventMenu(!eventMenu)}}>
                            {">"}
                        </button>
                    </div>
                ) : null}
            </div>
            <div className={styles.eventContainerBottom}>
            {(windowSize.width <= 768 || eventMenu) ? (
                <Link
                    to={`/event/` + event.id}
                    className={styles.moreLink}>
                    <Button>En savoir plus →</Button>
                </Link>
            ) : null}
            </div>
        </div>
    )
}

export default Event;