/***
 * /***
 * isotop settings
 * ***/
const elem = document.querySelector('.protfolio-content');
// const iso = new Isotope( elem, {
//     itemSelector: '.grid-item',
//     layoutMode: 'masonry',
// });

// change is-checked class on buttons
var filterGroups = document.querySelectorAll('.filter');
if(filterGroups.length > 0){
    for ( var i=0, len = filterGroups.length; i < len; i++ ) {
        var filterGroup = filterGroups[i];
        filterButtonGroup( filterGroup );
    }

    // bind filter button click
    var filtersElem = document.querySelector('.filter');
    filtersElem.addEventListener( 'click', function( event ) {
        if ( !matchesSelector( event.target, 'li' ) ) {
        return;
        }
        var filterValue = event.target.getAttribute('data-filter');
        iso.arrange({ filter: filterValue });
    });

    // change is-checked class on buttons
    var filterGroups = document.querySelectorAll('.filter');
    for ( var i=0, len = filterGroups.length; i < len; i++ ) {
        var filterGroup = filterGroups[i];
        filterButtonGroup( filterGroup );
    }
    function filterButtonGroup( filterGroup ) {
        filterGroup.addEventListener( 'click', function( event ) {
        // only work with li
        if ( !matchesSelector( event.target, 'li' ) ) {
            return;
        }
        filterGroup.querySelector('.active').classList.remove('active');
        event.target.classList.add('active');
        });
    }
}


/***
 * fancybox settings
 * ***/
Fancybox.bind('[data-fancybox]', {
    Toolbar: {
        display: [
            {
                id: "counter",
                position: "center",
            },
            "zoom",
            "slideshow",
            "fullscreen",
            "thumbs",
            "close",
        ],
    },
    on: {
    initLayout: (fancybox) => {
        // Create elements
        // ===

        // Create left column
        const $leftCol = document.createElement("div");
        $leftCol.classList.add("fancybox__leftCol");

        while (fancybox.$container.firstChild) {
            $leftCol.appendChild(fancybox.$container.firstChild);
        }

        // Create right column
        const $rightCol = document.createElement("div");
        $rightCol.classList.add("fancybox__rightCol");

        $rightCol.innerHTML =
            '<h3>Project Description</h3>';

        // Create info-box
        const $info = document.createElement("div");
        $rightCol.appendChild($info);
        fancybox.$info = $info;

        // Add elements to DOM
        fancybox.$container.appendChild(fancybox.$backdrop);

        fancybox.$container.appendChild($leftCol);
        fancybox.$container.appendChild($rightCol);

        fancybox.$leftCol = $leftCol;
        fancybox.$rightCol = $rightCol;
        },
        "Carousel.ready Carousel.change": (fancybox, carousel, slideIndex) => {
        // Update info-box
        // ===

        // Get index of the current gallery item
        slideIndex =
            slideIndex === undefined ? carousel.options.initialPage : slideIndex;

        // Get link related to current item
        const $trigger = fancybox.items[slideIndex].$trigger;

        // Get data from `data-info` attribute
        const data = $trigger.dataset.info || "";

        // Update info
        fancybox.$info.innerHTML = `<p>${data}</p>`;
        },
    },
});