const Hero = () => {
    const images = document.querySelectorAll('.blockHeroImg');

    const containers = document.querySelectorAll('.blockHeroTheme');
    containers.forEach((item) => {
        const image = item.querySelector('.blockHeroImg');
        item.style.height = image.offsetHeight + 'px'
    });

    const itemsM = document.querySelectorAll('.blockHeroThemeItemM');
    const items = document.querySelectorAll('.blockHeroThemeItem');
    const containerItems = document.querySelector('.blockHeroThemeItems');
    const imageEl = document.querySelector('#blockHeroImage');
    const loader = document.querySelector('.blockHeroThemeLoader');
    const progress = document.querySelector('.blockHeroThemeLoaderProgress');

    let prevColor = null;
    let timeOut = null;
    let arrayImage = [];

    const toggleItems = (innerItems) => {
        innerItems.forEach((item) => {
            item.addEventListener('click', () => {
                if (!prevColor) {
                    prevColor = item.dataset.color;
                }

                innerItems.forEach((innerItem) => {
                    if (innerItem.classList.contains('active')) {
                        prevColor = innerItem.dataset.color;
                        innerItem.classList.remove('active');
                    }
                });

                item.classList.add('active');

                if (images.length >= 2) {
                    images.forEach((img) => {
                        if (img.dataset.color === item.dataset.color) {
                            img.classList.add('active');
                        } else {
                            if (!timeOut && img.dataset.color === prevColor) {
                                img.classList.add('hide');

                                timeOut = setTimeout(() => {
                                    img.classList.remove('hide');
                                    img.classList.remove('active');

                                    clearTimeout(timeOut);
                                    timeOut = null;
                                }, 300);
                            }
                        }
                    });
                } else {
                    loader.style.opacity = 1;
                    progress.style.width = 0;
                    containerItems.style.pointerEvents = 'none';

                    const img = new Image();

                    img.onChangeSize = function (loaded, total) {
                        loader.style.opacity = 1;
                        progress.style.width = parseInt((loaded / total) * 100) + '%';

                        if (parseInt((loaded / total) * 100) >= 95) {
                            imageEl.style.opacity = 0;
                        }

                        if (parseInt((loaded / total) * 100) === 100) {
                            imageEl.style.opacity = 1;
                        }
                    }

                    img.onload = function () {
                        containerItems.style.pointerEvents = 'all';

                        if (!arrayImage.map(image => image.color).includes(item.dataset.color)) {
                            arrayImage.push({color: item.dataset.color, src: img.src});
                        }

                        const findImage =  arrayImage.find(image => image.color === item.dataset.color);

                        if (findImage) {
                            imageEl.src = findImage.src;
                        }

                        loader.style.opacity = 0;

                        let timeout = setTimeout(() => {
                            progress.style.width = 0;
                            clearTimeout(timeout);
                        }, 500);
                    }

                    img.load(`../../../assets/white-label-cfd-broker/hero/CTA_pic_${item.dataset.color}.png`);
                }
            });
        });
    }

    toggleItems(items);
    toggleItems(itemsM);
};

export default Hero;