import React, { useState, useEffect } from 'react'
const { apiFetch } = wp;
import Masonry from 'react-masonry-component';
const Sections = () => {
    const [isLoading, setISLoading] = useState(false)
    const [sections, setSections] = useState([]);
    useEffect(() => {
        wp.apiFetch({
            method: 'GET',
            path: '/blockspare/v1/layouts/all?filter=allowed',
        }).then(async (components) => {
            const sections = [];
            Object.values(components).forEach(function (item) {

                if ('section' === item.type) {
                    sections.push(item);
                }
            })
            setISLoading(true)
            setSections(sections)

        })

    }, [])

    const masonryOptions = {
        transitionDuration: 0,
        percentPosition: true,
    };

    return (

        <div className='bs-pages-demo-wrapper'>
            {isLoading ? <Masonry
                elementType={'div'}
                className={`bs-templates-container`}
                options={masonryOptions}
                disableImagesLoaded={false}
                updateOnEachImageLoad={false}
            >
                {sections &&
                    sections.map((item, i) => {
                        const nameInLowerCase = item.name.toLowerCase();
                        const imageName = nameInLowerCase.replace(/\s+/g, '-');
                        const folderName = item.imagePath
                        return (

                            <div className='bs-layout-pages-inside'>
                                {
                                    item.content === 'https://www.blockspare.com/' &&
                                    <span className="bs-pro-badge">pro </span>
                                }
                                <div className='bs-layout-pages-item'>
                                    <div className='LazyLoad is-visible'>
                                        <a href={item.blockLink} target='_blank' >
                                            <img
                                                src={blockspare_dashboard.imagePath + folderName + "/" + imageName + ".jpg"}
                                                alt={item.name}
                                            />
                                        </a>
                                    </div>
                                    <div className='bs-layout-pages-info'>
                                        <div className='bs-layout-design-title'>
                                            <a href={item.blockLink} target='_blank' >{item.name}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>



                        )


                    })
                }
            </Masonry> : <div className="bs-loader-container">
                <div className="bs-loader"></div>
            </div>}
        </div>
    )

}

export default Sections