import React, { useEffect, useRef } from 'react';
import { initializeShowcase } from '../utils/showcaseInitializer';
import { waitForDependenciesAndInit } from '../utils/sliderInitializer';

/**
 * LayoutPreview Component
 * Universal component that handles initialization for all layout types
 * (showcase, slider, grid, masonry, etc.)
 */
const LayoutPreview = ({ htmlContent, className = '', style = {} }) => {
    const containerRef = useRef(null);

    useEffect(() => {
        if (containerRef.current && htmlContent) {
            // Small delay to ensure DOM is fully rendered
            const timeoutId = setTimeout(() => {
                // Initialize showcases
                const showcases = containerRef.current.querySelectorAll('.wcps-showcase[id^="wcps-showcase-"]');
                showcases.forEach(showcase => {
                    initializeShowcase(showcase.id);
                });

                // Initialize sliders
                const sliders = containerRef.current.querySelectorAll('.wcps-slider-container[id^="wcps-slider-"]');
                sliders.forEach(slider => {
                    waitForDependenciesAndInit(slider.id);
                });

                // Initialize masonry layouts (if needed in future)
                const masonryContainers = containerRef.current.querySelectorAll('.wcps-masonry[id^="wcps-masonry-"]');
                if (masonryContainers.length > 0) {
                    console.log(`Found ${masonryContainers.length} masonry containers`);
                    // Future: Add masonry initialization
                }

                // Initialize isotope/filtering layouts (if needed in future)
                const filterContainers = containerRef.current.querySelectorAll('.wcps-filter-container[id^="wcps-filter-"]');
                if (filterContainers.length > 0) {
                    console.log(`Found ${filterContainers.length} filter containers`);
                    // Future: Add isotope initialization
                }

            }, 100);

            return () => clearTimeout(timeoutId);
        }
    }, [htmlContent]);

    return (
        <div 
            ref={containerRef}
            className={`layout-preview-container ${className}`}
            style={style}
            dangerouslySetInnerHTML={{ __html: htmlContent }}
        />
    );
};

export default LayoutPreview;