import React, { useState, useEffect, useRef, useCallback } from 'react';
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import lgHash from 'lightgallery/plugins/hash';
import 'lightgallery/css/lightgallery.css';

const LcpGallery = (props) => {
  const [settings, setSettings] = useState({
    elementClassNames: 'lcp-gallery grid',
    plugins: [],
    zoom: false,
    hash: false,
    download: false
  });

  const lightGallery = useRef(null);

  // onInit callback to initialize the lightGallery instance
  const onInit = useCallback((detail) => {
    if (detail) {
      lightGallery.current = detail.instance;
    }
  }, []);

  // Update settings based on the props
  useEffect(() => {
    console.log("Props received:", props);

    const plugins = [];

    // Convert plugin strings to actual plugin functions
    if (props.plugins) {
      props.plugins.forEach((plugin) => {
        console.log(`Adding plugin: ${plugin}`);
        if (plugin === 'lgZoom') {
          plugins.push(lgZoom); // Add lgZoom function
        } else if (plugin === 'lgHash') {
          plugins.push(lgHash); // Add lgHash function
        }
      });
    }

    // Update settings with new plugins and options
    setSettings((prevSettings) => ({
      ...prevSettings,
      plugins,         // Updated plugins
      zoom: props.zoom || false, // Default zoom option
      hash: props.hash || false, // Default hash option
      download: props.download || false
    }));
  }, [props]);

  // Reinitialize gallery when settings change (with careful timing)
  useEffect(() => {
    console.log("Settings changed:", settings);

    // Check if gallery instance exists and only refresh if initialized
    if (lightGallery.current) {
      console.log("Refreshing gallery...");
      lightGallery.current.refresh();  // Refresh the gallery instance
    }
  }, [settings]);

  return (
    <LightGallery
      ref={lightGallery}
      plugins={settings.plugins}
      elementClassNames={settings.elementClassNames}
      zoom={settings.zoom}
      hash={settings.hash}
      download={settings.download}
      onInit={onInit}  // Pass the onInit callback to initialize the gallery instance
    >
      {/* Gallery Items */}
      <a
        data-lg-size="1600-1067"
        className="gallery-item"
        data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
        data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd' >Tobias Rademacher </a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>"
      >
        <img
          alt="layers of blue."
          className="img-responsive"
          src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
        />
      </a>

      <a
        data-lg-size="1600-2400"
        className="gallery-item"
        data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
        data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@therawhunter' >Massimiliano Morosinotto </a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo%2C-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>"
      >
        <img
          className="img-responsive"
          src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
        />
      </a>
    </LightGallery>
  );
};

export default LcpGallery;