let breakpoint = window.matchMedia('(min-width: 767px)');

const Footer = () => {
    const block = document.querySelectorAll('.footer__block');
    block.forEach((item) => {
        const header = item.querySelector('.footer__block-header');
        const body = item.querySelector('.footer__block-body');

        if (!breakpoint.matches) {
            header.addEventListener('click', (e) => {
                const timeout = setTimeout(() => {
                    if (item.classList.contains('open')) {
                        item.classList.remove('open');
                        body.style.height = `0px`;
                    } else {
                        closeAll(block);

                        item.classList.add('open');
                        body.style.height = `${e.target.nextElementSibling.scrollHeight}px`;
                    }

                    clearTimeout(timeout);
                }, 50);
            });
        }
    });
};

window.onresize = function () {
    const breakpoint = window.matchMedia('(min-width: 767px)');
    const block = document.querySelectorAll('.footer__block');

    if (breakpoint.matches) {
        block.forEach((item) => {
            const body = item.querySelector('.footer__block-body');

            item.classList.remove('open');
            body.style.height = `initial`;
        });
    } else {
        closeAll(block);
    }
};

const closeAll = (block) => {
    block.forEach((item) => {
        const body = item.querySelector('.footer__block-body');

        item.classList.remove('open');
        body.style.height = `0px`;
    });
}

export default Footer;