import {useState} from "react";
import Event from "../../components/Event/Event.jsx";
import {Link} from "react-router";
import styles from "./EventsPage.module.css";
import Filter from "../../components/Filter/Filter.jsx";



function EventsPage(){
    const [isFilterVisible, setIsFilterVisible] = useState(false);
    const toggleFilters = () => {
        setIsFilterVisible(prev => !prev);
    };

    const [filters, setFilters] = useState({
        alphabetical: "asc",
        yearOrder: "asc",
    });

    const [events] = useState([
        {
            id: 1,
            name: "Marathon de la Ville",
            description: "Participez au marathon annuel et soutenez les associations locales.",
            image: null,
            tasks: [
                {
                    name: "Inscription des participants",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Centre sportif",
                    description: "Accueillir et enregistrer tous les coureurs.",
                    volunteers_count: 5
                },
                {
                    name: "Distribution des dossards",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle principale",
                    description: "Remettre les dossards et goodies aux participants.",
                    volunteers_count: 3
                },
            ]
        },
        {
            id: 2,
            name: "Festival de Musique d’Été",
            description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.",
            image: null,
            tasks: [
                {
                    name: "Montage de la scène",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Parc central",
                    description: "Installer la scène, les éclairages et le son.",
                    volunteers_count: 6
                },
                {
                    name: "Accueil du public",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Entrée principale",
                    description: "Vérifier les billets et orienter les visiteurs.",
                    volunteers_count: 4
                },
            ]
        },
        {
            id: 3,
            name: "Conférence Tech Innovante",
            description: "Journée de conférences et workshops autour des nouvelles technologies.",
            image: null,
            tasks: [
                {
                    name: "Préparation des salles",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Campus Tech",
                    description: "Installer les chaises, projecteurs et matériel pour les conférences.",
                    volunteers_count: 4
                },
                {
                    name: "Accueil des intervenants",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Hall principal",
                    description: "Assister les speakers et orienter vers les salles.",
                    volunteers_count: 2
                },
                {
                    name: "Gestion du buffet",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle de restauration",
                    description: "Distribuer boissons et repas aux participants.",
                    volunteers_count: 3
                },
            ]
        },
        {
            id: 4,
            name: "Atelier de Jardinage Urbain",
            description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
            image: null,
            tasks: [
                {
                    name: "Installation du matériel",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Jardin partagé",
                    description: "Préparer outils et terreaux pour les participants.",
                    volunteers_count: 2
                },
                {
                    name: "Encadrement des participants",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Jardin partagé",
                    description: "Aider et conseiller sur la plantation et l’entretien.",
                    volunteers_count: 3
                },
            ]
        },
        {
            id: 5,
            name: "Collecte de Sang",
            description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
            image: null,
            tasks: [
                {
                    name: "Accueil et enregistrement",
                    start: "2020-09-24 22:21:20",
                    end: "2020-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Enregistrer les donneurs et expliquer le processus.",
                    volunteers_count: 4
                },
                {
                    name: "Préparation des salles",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Installer les lits, tables et matériel médical.",
                    volunteers_count: 3
                },
                {
                    name: "Assistance post-don",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
                    volunteers_count: 2
                },
                {
                    name: "Accueil et enregistrement",
                    start: "2020-09-24 22:21:20",
                    end: "2020-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Enregistrer les donneurs et expliquer le processus.",
                    volunteers_count: 4
                },
                {
                    name: "Préparation des salles",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Installer les lits, tables et matériel médical.",
                    volunteers_count: 3
                },
                {
                    name: "Assistance post-don",
                    start: "2018-09-24 22:21:20",
                    end: "2018-09-24 22:21:20",
                    place: "Salle municipale",
                    description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
                    volunteers_count: 2
                },
            ]
        },
    ]);

    const compareDate = (dateA, dateB) => {
        const dA = new Date(dateA);
        const dB = new Date(dateB);

        if (filters.yearOrder === "asc") {
            return dB - dA;
        } else {
            return dA - dB;
        }
    };

    const sortedEvents = [...events].sort((a, b) => {
        const sortedATasks = a.tasks.sort((taskA, taskB) =>
            compareDate(taskA.start, taskB.start)
        );
        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
            compareDate(taskA.start, taskB.start)
        );

        const timeComparison = compareDate(
            sortedATasks[0].start,
            sortedBTasks[0].start
        );

        if (timeComparison !== 0) {
            return timeComparison;
        }

        if (filters.alphabetical !== null) {
            return filters.alphabetical === "asc"
                ? a.name.localeCompare(b.name)
                : b.name.localeCompare(a.name);
        }

        return 0;
    });




    return (
        <div className={styles.eventsContainer}>
            <div className={styles.eventsButtons}>
                <Link
                    to="/event/create"
                    className={`${styles.createButton} glassCard`}>
                    +
                </Link>
                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
                        </svg>
                    </button>
                    <div className={styles.filterMenu}>
                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
                    </div>
                </div>
            </div>
            <div className={styles.eventsList}>
                {sortedEvents.map((event, index) => (
                    <Event key={index} event={event} />
                ))}
            </div>
        </div>
    )
}

export default EventsPage;