const { __ } = wp.i18n;
const { useEffect, useRef, useContext } = wp.element;
import MiniMasonry from "minimasonry";
import { AppContext } from "../AppContext";

export default function MasonryGrid( { isLoading, items, onTemplateClick, loadingTemplate } ) {
    if ( !items ) return null;

    const isPro = useContext( AppContext );
    const containerRef = useRef( null );
    const masonryRef = useRef( null );

    useEffect( () => {
        if ( !containerRef.current ) return;

        // Initialize MiniMasonry
        masonryRef.current = new MiniMasonry( {
            container: containerRef.current,
            baseWidth: 280, // width of one item (adjust as needed)
            gutter: 12, // spacing between items
            minify: true, // pack tightly
            surroundingGutter: false,
            wedge: true, // align left
        } );

        // Re-layout after images load
        const handleResize = () => masonryRef.current.layout();
        window.addEventListener( "resize", handleResize );

        return () => {
            window.removeEventListener( "resize", handleResize );
            masonryRef.current = null;
        };
    }, [] );

    // Re-layout whenever items change
    useEffect( () => {
        if ( masonryRef.current ) {
            masonryRef.current.layout();
        }
    }, [items] );

    return (
        <>
            {isLoading &&
                <div className="masonry-wrap">
                    <div className="safi-overlay --showing" style={{ top: 0, backgroundColor: 'rgba(0, 0, 0, 0)' }}><span className="safi-loader"></span></div>
                </div>
            }
            <div className="masonry-wrap">
                {!isPro &&
                    <div className="safi-overlay --showing" style={{
                        top: 0,
                        justifyContent: 'flex-start',
                        // borderRadius: '4px',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        // backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.667) 160px, rgba(0, 0, 0, 0) 280px)'
                        // backgroundImage: 'linear-gradient(to bottom, #000000aa 0%, #00000000 250px)'
                    }}>
                        <div style={{
                            position: 'sticky',
                            top: '0px',
                            fontSize: '18px',
                            textAlign: 'center',
                            paddingBlock: '40px',
                            width: '100%',
                            // borderTopLeftRadius: '4px',
                            // borderTopRightRadius: '4px',
                            // backgroundColor: 'rgba(0, 0, 0, 0)',
                            backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.667), rgba(0, 0, 0, 0))'
                        }}>
                            <p>{__( "Unlock dozens of premium templates with Smart Auto Featured Image Pro", "wpjoli-safi" )}</p>
                            <p>
                                <a className="safi-tb-btn safi-btn-primary" target="_blank" href="https://wpjoli.com/smart-auto-featured-image/">Get Pro Now</a>
                            </p>
                        </div>
                    </div>
                }
                <div ref={containerRef} className={`masonry-items ${!isPro ? '--lock' : ''}`}>

                    {
                        items.map( ( template, i ) => {
                            return (
                                <div
                                    key={i}
                                    className="masonry-template"
                                    data-tpl-id={template.id}
                                    onClick={() => onTemplateClick( template )}
                                    style={{
                                        aspectRatio: template.size.width / template.size.height,
                                        backgroundColor: '#444',
                                    }}
                                // style={template.thumbnail ? {
                                //     backgroundImage: "url(" + template.thumbnail + ")",
                                // } : null}
                                >
                                    <div className="masonry-template-inner">
                                        <img src={template.thumbnail} alt="" loading="lazy" />
                                        {/* Template dimensions */}
                                        <div className="template-dimensions">
                                            <span>{template.size.width}x{template.size.height}</span>
                                        </div>
                                        {loadingTemplate !== null && loadingTemplate === template.id &&
                                            <div className="safi-overlay --showing" style={{ top: 0 }}>
                                                <span className="safi-loader"></span>
                                            </div>
                                        }
                                    </div>
                                </div>
                            );
                        } )
                    }
                </div>
            </div>
        </>
    );
}
