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

function Event({event}){

    const navigate = useNavigate();

    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`} onClick={() => seteventMenu(!eventMenu)}>
            <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>
                        {event.tasks != null ? (
                            <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>
                        ) : null}
                    </div>
                </div>
                {windowSize.width > 768 ? (
                    <div className={styles.eventButtons}>
                        <Button
                            variant={"transparent"}
                            onClick={()=>{seteventMenu(!eventMenu)}}
                            className={`${eventMenu ? styles.moreButtonClicked : ""}`}
                        >
                            {">"}
                        </Button>
                    </div>
                ) : null}
            </div>
            <div className={styles.eventContainerBottom}>
            {(windowSize.width <= 768 || eventMenu) ? (

                <Button onClick={() => navigate(`/events/` + event.id)}>Voir plus</Button>

            ) : null}
            </div>
        </div>
    )
}

export default Event;