import {useEffect, useContext, useRef} from "react";
import styles from "./EventDetailPage.module.css";
import { useParams } from "react-router";
import { formatDateLetter } from "../../utils/date/formatDateLetter";
import EventTask from "./components/EventTask/EventTask";
import { AuthContext } from "../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContext";
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn";
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn";
import EditEventBtn from "./components/EditEventBtn/EditEventBtn";
import uploadEventPhoto from "../../utils/events/uploadEventPhoto";

function EventDetailPage() {
    const params = useParams();
    const id = params.id as string;

    const { user } = useContext(AuthContext) as any;
    const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext) as any;
    const fileInputRef = useRef<HTMLInputElement | null>(null);
    const imageUrl = eventInfo?.event_photo_path
        ? `${import.meta.env.VITE_API_URL}/storage/${eventInfo.event_photo_path}`
        : "/empty.png";

    console.log(eventInfo);
    useEffect(() => {
        if (id) {
            updateEventInfo(id);
        }
    }, []);
    const handleImageClick = () => {
        if (user?.isAdmin && fileInputRef.current) {
            fileInputRef.current?.click();
        }
    };

    const handleFileChange = async (e: any) => {
        const file = e.target.files[0];
        if (!file) return;

        await uploadEventPhoto(Number(id), file);
        updateEventInfo(id);
    };
    return (
        <div className={styles.allContent}>
            <div className={`glassCard`}>
                <div className={styles.textImage}>
                    <img
                        src={imageUrl}
                        alt="Photo événement"
                        className={styles.eventImage}
                        onClick={handleImageClick}
                        style={{ cursor: user?.isAdmin ? "pointer" : "default" }}
                    />
                    <input
                        type="file"
                        ref={fileInputRef}
                        style={{ display: "none" }}
                        onChange={handleFileChange}
                    />

                    <div className={styles.eventInfo}>
                        <h2>{eventInfo?.name}</h2>

                        <div className={styles.eventContent}>
                            <div>
                                <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
                                <p>{eventInfo?.description}</p>
                            </div>

                            {user?.isAdmin && (
                                <div className={styles.manageEvent}>
                                    <EditEventBtn id={id} />
                                    <DeleteEventBtn id={id} />
                                    <CreateTaskBtn id={id} />
                                </div>
                            )}
                        </div>
                    </div>
                </div>

                <h2>Tâches</h2>

                <div className={styles.tasks}>
                    {tasks?.map((task: any, index: number) => (
                        <EventTask key={task.id} taskId={task.id} index={index} />
                    ))}
                </div>
            </div>
        </div>
    );
}

export default EventDetailPage;