"use client"
import { useEffect, useRef, useState } from "react";
import imagesLoaded from "imagesloaded";
import Isotope from "isotope-layout";
import Link from "next/link";
import { GalleryImages } from "../../../utils/constant.utils";

const GalleryFullSection = () => {
    const isotope = useRef(null);
    const [active, setActive] = useState(2);  // Set the default active state to 2025 (index 2)
    const [isOpen, setIsOpen] = useState(false);
    const [imageSrc, setImageSrc] = useState("");

    useEffect(() => {
        if (typeof window !== "undefined") {
            // Client-side code here
            const imgLoad = imagesLoaded(document.querySelectorAll(".image-container"));
            imgLoad.on("always", () => {
                isotope.current = new Isotope(".filter-container", {
                    itemSelector: ".filter-item",
                    layoutMode: "masonry",
                    percentPosition: true,
                });
                // Apply the default filter (2025 images) when the component mounts
                isotope.current.arrange({ filter: ".pro5" });
            });

            return () => {
                isotope.current?.destroy();
            };
        }
    }, []);

    // Handle Filter Changes
    const handleFilterKeyChange = (key, index) => {
        setActive(index);
        isotope.current?.arrange({ filter: key });
    };

    // Open Lightbox
    const openLightbox = (src) => {
        setImageSrc(src);
        setIsOpen(true);
    };

    // Close Lightbox
    const closeLightbox = () => {
        setIsOpen(false);
        setImageSrc("");
    };

    return (
        <div className="portfolio-area-1 space-top">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-lg-5">
                        <div className="title-area text-center">
                            <h2 className="sec-title">Gallery</h2>
                        </div>
                    </div>
                    <div className="col-12">
                        <div className="portfolio-tab-1 mb-60">
                            <div className="filter-menu-active text-center">
                                <button
                                    className={`${active === 1 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange("*", 1)}  // Show All
                                >
                                    All
                                </button>
                                <button
                                    className={`${active === 2 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange(".pro5", 2)}  // Show 2025 images
                                >
                                    2025
                                </button>
                                <button
                                    className={`${active === 3 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange(".pro4", 3)}  // Show 2024 images
                                >
                                    2024
                                </button>
                                <button
                                    className={`${active === 4 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange(".pro3", 4)}  // Show 2020 images
                                >
                                    2020
                                </button>
                                <button
                                    className={`${active === 5 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange(".pro2", 5)}  // Show 2010 images
                                >
                                    2010
                                </button>
                                <button
                                    className={`${active === 6 ? "active" : ""} btn style-border3`}
                                    type="button"
                                    onClick={() => handleFilterKeyChange(".pro1", 6)}  // Show 2003 images
                                >
                                    2003
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Image Grid */}
                <div className="row gy-30 gx-30 filter-container">
                    {GalleryImages.map((image, index) => (
                        <div key={index} className={`col-lg-4 filter-item ${image.category}`}>
                            <div className="portfolio-card image-container">
                                <div className="portfolio-card-thumb">
                                    <img
                                        src={image.src}
                                        alt="Gallery"
                                        onClick={() => openLightbox(image.src)}
                                        style={{ cursor: "pointer" }}
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Lightbox Modal */}
            {isOpen && (
                <div className="custom-modal_popup">
                    <span className="close-button" onClick={closeLightbox}>
                        &times;
                    </span>
                    <img src={imageSrc} alt="Fullsize" />
                </div>
            )}
        </div>
    );
};

export default GalleryFullSection;
