import { FC, useRef, useState, useEffect } from 'react';
import useIsotope from '@/hooks/useIsotope';

import classNames from 'classnames';
import { useLightBoxGallery } from 'hooks/useLightBox';

interface GalleryProps {
  title?: string;
  preTitle?: string;
  categories: any[];
  darkColor?: string;
  lightColor?: string;
  gallery: any[];
}
const Gallery: FC<GalleryProps> = (props) => {
  const { title = '', preTitle = '', darkColor = '', lightColor = '', categories, gallery } = props;

  const { filterKey, handleFilterKeyChange, updateIsotope } = useIsotope();
  const [visibleItems, setVisibleItems] = useState(6); // Number of visible items
  const containerRef = useRef<HTMLDivElement>(null);
  useLightBoxGallery([visibleItems]);
  // Filter options

  // Load more items
  const handleLoadMore = () => {
    setVisibleItems((prev) => prev + 6);
  };

  // Reinitialize Isotope when visibleItems change
  useEffect(() => {
    if (containerRef.current) {
      updateIsotope(filterKey); // Trigger relayout after items are appended
    }
  }, [visibleItems, updateIsotope]);

  return (
    <section id="gallery">
      <div className="wrapper">
        <div className="container py-6 py-md-8 text-center">
          <div className="col-12 tw-text-start pb-4 pb-lg-8">
            <span className="tw-text-xs md:tw-text-sm tw-tracking-widest tw-text-main-color tw-font-inter tw-font-semibold tw-uppercase">
              {preTitle}
            </span>
            <h2
              style={{ color: darkColor }}
              className="tw-text-3xl md:tw-text-[40px] tw-font-normal tw-font-ibm tw-my-4"
            >
              {title}
            </h2>
          </div>

          <div className="grid grid-view projects-masonry ">
            {/* Filter buttons */}
            <div
              style={{ borderColor: darkColor }}
              id="gallery-content"
              className="isotope-filter filter basic-filter mb-10 pb-5 tw-border-b"
            >
              <ul>
                {categories.map(({ id, title, slug }) => {
                  const value = slug !== '*' ? '.' + slug : slug;
                  return (
                    <li key={id} className="mx-lg-8">
                      <a onClick={handleFilterKeyChange(value)} className={`filter-item`}>
                        <span
                          style={filterKey === value ? { color: darkColor } : {}}
                          className={classNames(
                            'tw-text-main-dark tw-font-inter tw-font-medium tw-text-sm md:tw-text-base tw-tracking-widest  hover:tw-opacity-50 tw-uppercase'
                          )}
                        >
                          {title}
                        </span>
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>

            {/* Gallery items */}
            <div className="row gx-md-6 gy-6 isotope" ref={containerRef}>
              {gallery.slice(0, visibleItems).map((item, key) => (
                <div className={`project item col-md-6 col-xl-4 ${item?.advanceCategory?.slug}`} key={key}>
                  <figure className="overlay overlay-1 rounded">
                    <a href={item?.image?.url} data-glightbox="gallery" data-gallery="shots-group">
                      <img src={item?.image?.url} alt={''} />
                      <span className="bg" />
                    </a>
                    <figcaption>
                      <h5 className="from-top mb-0 tw-font-inter tw-font-semibold tw-uppercase">Ver más</h5>
                    </figcaption>
                  </figure>
                </div>
              ))}
            </div>

            {/* Load more button */}
            <div className="text-center mt-8">
              {(visibleItems < gallery.length && (
                <button
                  onClick={handleLoadMore}
                  className="tw-font-inter tw-text-main-dark tw-text-sm md:tw-text-base tw-font-semibold tw-uppercase hover:tw-opacity-75"
                >
                  CARGAR MÁS
                </button>
              )) || (
                <button
                  onClick={() => setVisibleItems(6)}
                  className="tw-font-inter tw-text-main-dark tw-text-sm md:tw-text-base tw-font-semibold tw-uppercase hover:tw-opacity-75"
                >
                  Ver MENOS
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Gallery;