'use client';

import Layout from '@/components/layout/Layout';
import { memoryData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

interface EventData {
    image: string;
    title: string;
    desc?: string;
    date: string;
    slug: string;
    link?: string;
    gallery?: string[];
}

export default function SingleGallery() {
    const searchParams = useSearchParams();
    const slug = searchParams.get('slug');

    // Flatten all events into a single array
    const allEvents: EventData[] = Object.values(memoryData).flat();

    // Match event by slug
    const matchedEvent = allEvents.find(event => event.slug === slug);
    const galleryImages: string[] = matchedEvent?.gallery || [];

    const [open, setOpen] = useState<boolean>(false);
    const [currentIndex, setCurrentIndex] = useState<number>(0);

    const handleImageClick = (index: number) => {
        setCurrentIndex(index);
        setOpen(true);
    };

    return (
        <>
            <Layout headerStyle={1} footerStyle={1}>
                {/* Header Section */}
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 m-auto">
                                <div className="heading1 text-center">
                                    <h1>Recent Memories</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="bloginner-section-area sp4">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="event2-header heading5 space-margin60">
                                    <h2 className="text-anime-style-3">
                                        {matchedEvent?.title || "Photos Gallery"}
                                        <p>{matchedEvent?.desc}</p>
                                    </h2>
                                </div>
                            </div>
                        </div>

                        <div className="row gx-5">
                            <div className="col-lg-12">
                                <div className="row mt-4">
                                    {galleryImages.map((src: string, index: number) => (
                                        <div
                                            key={index}
                                            className="col-lg-3 col-md-6 mb-4"
                                            data-aos="zoom-in"
                                            data-aos-duration={1000}
                                        >
                                            <div className="blog4-boxarea">
                                                <div
                                                    className="img1"
                                                    style={{ cursor: 'pointer' }}
                                                    onClick={() => handleImageClick(index)}
                                                >
                                                    <img
                                                        src={src}
                                                        alt={`gallery-${index}`}
                                                        loading="lazy"
                                                        style={{ width: '100%', height: 'auto' }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    ))}

                                    {galleryImages.length === 0 && (
                                        <div className="col-12 text-center mt-5">
                                            <p className="text-muted">No images found for this event.</p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <Lightbox
                    open={open}
                    close={() => setOpen(false)}
                    index={currentIndex}
                    slides={galleryImages.map((src) => ({ src }))}
                />
            </Layout>
        </>
    );
}