/* ---------------------- Created By InCoder ---------------------- */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(24 24 24 / 93%);
}

.galleryContainer {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.items ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.items ul li {
    list-style: none;
    margin: 1.5rem 1rem;
}

.items ul li button.item {
    color: #F53B69;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 2rem;
    padding: .6rem 1.8rem;
    border: 2px solid #F53B69;
    background-color: transparent;
    transition: background-color .3s ease, color .3s ease;
}

.items ul li button.item:hover {
    color: #fff;
    background-color: #F53B69;
}

.item.active {
    color: #fff!important;
    background-color: #F53B69!important;
}

.imageBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.imageBox .image img {
    max-width: 16rem;
    max-height: 16rem;
    transition: transform 0.3s ease-in-out;
}

.imageBox .image {
    cursor: pointer;
    overflow: hidden;
    margin: .5rem 2rem;
    position: relative;
    transition: all .5s ease-in-out;
}

.imageBox .image.show {
    animation: show .5s ease;
}

.imageBox .image.hide {
    opacity: 0;
    display: none;
    transform: scale(.5)
}

@keyframes show {
    0% {
        transform: scale(.5)
    }
    100% {
        transform: scale(1)
    }
}

.imageBox .image:hover img {
    transform: scale(1.1);
}

.previewContainer {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    position: fixed;
    align-items: center;
    pointer-events: none;
    justify-content: center;
    backdrop-filter: blur(2px);
    background: rgb(255 255 255 / 8%);
    transition: opacity 0.3s ease-in-out;
}

.previewContainer.active {
    opacity: 1;
    pointer-events: auto;
}

.previewContainer .previewModal {
    margin: 1rem;
    padding: 1rem 1rem;
    background: #fff;
    border-radius: .4rem;
    transform: translateY(-1rem);
    transition: transform 0.3s ease-in-out;
}

.previewContainer.active .previewModal {
    transform: translateY(0rem);
}

.previewContainer .previewModal .header {
    display: flex;
    margin-bottom: .8rem;
    justify-content: space-between;
}

.previewContainer .previewModal .header h2 {
    font-size: clamp( 1.8rem, 5vw, 2.2rem);
    font-family: 'Ubuntu', sans-serif;
}

.previewContainer .previewModal .header .closeIcon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    place-items: center;
    margin-right: .8rem;
    transition: background-color .2s ease-in-out;
}

.previewContainer .previewModal .header .closeIcon:hover {
    background-color: rgb(0 0 0 / 4%);
}

.previewContainer .previewModal .body {
    max-width: 50rem;
}

.previewContainer .previewModal .body img {
    width: 100%;
    max-height: 30rem;
}

// ---------------------- Created By InCoder ----------------------

let items = document.querySelectorAll('.item');
let showAll = document.querySelector('.showAll');
let closeIcon = document.querySelector('.closeIcon');
let previewImg = document.querySelector('.previewImg');
let images = document.querySelectorAll('.imageBox .image');
let previewContainer = document.querySelector('.previewContainer');

function arrayMatch(clickedItem, allImages) {
    var matchedArray = [];
    for (var i = 0; i < clickedItem.length; ++i) {
        for (var j = 0; j < allImages.length; ++j) {
            if (clickedItem[i] == allImages[j]) {
                matchedArray.push(clickedItem[i]);
            }
        }
    }

    return matchedArray;
}

items.forEach((item) => {
    let filterItem = item.getAttribute('data-filterItem');
    item.addEventListener('click', (e) => {
        for (let i = 0; i < images.length; i++) {
            image = images[i].dataset.filtername;
        }

        for (let i = 0; i < items.length; i++) {
            if (items[i].classList.contains('active')) {
                items[i].classList.remove('active');
            }
        }
        if (!e.path[0].classList.contains('active')) {
            e.path[0].classList.add('active');
        }

        let clickedItem = [];
        for (let a = 0; a < 1; a++) {
            clickedItem.push(e.path[0].dataset.filteritem);
        }

        let allImages = [];
        for (let i = 0; i < images.length; i++) {
            allImages.push(images[i].dataset.filtername);
        }

        let matchingArray = arrayMatch(clickedItem, allImages)[0];

        for (let j = 0; j < images.length; j++) {
            let imagesName = images[j];
            if (imagesName.dataset.filtername == matchingArray) {
                imagesName.classList.remove('hide');
                imagesName.classList.add('show');
            } else {
                imagesName.classList.remove('show');
                imagesName.classList.add('hide');
            }
        }
    });
});

showAll.addEventListener('click', function() {
    for (let i = 0; i < images.length; i++) {
        images[i].classList.remove('hide');
        images[i].classList.add('show');
    }
});

images.forEach((image) => {
    image.addEventListener('click', (e) => {
        let imageUrl = e.path[0].currentSrc;
        previewImg.src = imageUrl
        previewContainer.classList.add('active');
        console.log(e.path[0].currentSrc);
    });
});

closeIcon.addEventListener('click', () => {
    previewContainer.classList.remove('active');
});

previewContainer.addEventListener('click', function(e) {
    if (!document.querySelector('.previewModal').contains(e.target)) {
        previewContainer.classList.remove('active');
    }
});