const init = () => {
    //const $carousel = jQuery('.c-carousel.f-multi-slide > [itemscope] > ul');

    /**
     * Event to switch tabs
     * TODO: Refactor the variables/events to allow for expanding the number of tabs
     * */
    const switchTab = () => {
        const $R1 = document.querySelector('#pivot-tab-primaryR1');
        const $R2 = document.querySelector('#pivot-tab-primaryR2');

        const $R1_Pivot = document.querySelector('#pivot-primaryR1');
        const $R2_Pivot = document.querySelector('#pivot-primaryR2');

        const fn_navigateToR1 = (e) => {
            e.preventDefault();
            if (!$R1.classList.contains('f-active')) {
                $R1.classList.add('f-active');
                $R2.classList.remove('f-active');
                $R1_Pivot.classList.add('tab-displayed');
                $R2_Pivot.classList.remove('tab-displayed');
                if (window.innerWidth < 700) {
                    jQuery('.c-carousel.f-multi-slide > [itemscope] > ul').slick('refresh');
                }
            }
        }

        const fn_navigateToR2 = (e) => {
            e.preventDefault();
            if (!$R2.classList.contains('f-active')) {
                $R2.classList.add('f-active');
                $R1.classList.remove('f-active');
                $R1_Pivot.classList.remove('tab-displayed');
                $R2_Pivot.classList.add('tab-displayed');
                setTimeout(() => {
                    adjustSection();
                }, 1000);
                if (window.innerWidth < 700) {
                    jQuery('.c-carousel.f-multi-slide > [itemscope] > ul').slick('refresh');
                }
            }
        }

        const fn_cycleTabs = (e, fn, $focus) => {
            const arrow = { left: 37, right: 39 };
            switch (e.which) {
              case arrow.left:
              case arrow.right:
                fn(e);
                $focus.focus();
                break;
            }
        }

        $R1.addEventListener('click', fn_navigateToR1);
        $R2.addEventListener('click', fn_navigateToR2);
        $R1.addEventListener('keydown', (e) => fn_cycleTabs(e, fn_navigateToR2, $R2));
        $R2.addEventListener('keydown', (e) => fn_cycleTabs(e, fn_navigateToR1, $R1));
    };

    // Event to expand and collapse Services & value section
    const ServiceValues = () => {
        document.querySelectorAll('.summary.top.services td > button').forEach((ele) => {
            ele.addEventListener('click', (e) => {
                document.querySelectorAll('.summary.top.services td').forEach((item) => {
                    item.classList.toggle('show');
                    item.closest('.summary.top').classList.toggle('visible');
                    setTimeout(() => {
                        adjustSection();
                    }, 1000);
                });
            });
        });

        document.querySelectorAll('.services-mobile').forEach((e) => {
            e.addEventListener('click', (e) => {
                document.querySelectorAll('.services-mobile').forEach((item) => {
                    item.classList.toggle('show');
                    jQuery('.c-carousel.f-multi-slide > [itemscope] > ul').slick('refresh');
                });
            });
        });
    };

    // Inject slider to table mobile view
    const mobileSlider = () => {
        if (window.innerWidth <= 700) {
            jQuery.getScript('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', () => {
                setTimeout(() => {
                    jQuery('.c-carousel.f-multi-slide > [itemscope] > ul').slick({
                        dots: true,
                        arrows: true,
                        speed: 800,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        autoplay: false,
                        adaptiveHeight: true,
                        autoplaySpeed: 2500,
                        infinite: false
                    });
                }, 1000);
            });
        }
        if (window.innerWidth > 700) {
            window.addEventListener('resize', () => {
                if (window.innerWidth <= 700) {
                    window.location.reload();
                }
            });
        }
    };

    const adjustSection = () => {
        let adjustSection1 = document.querySelector('.wf-target-height').clientHeight;
        document.querySelector(
            '#office-ComparisonTable-1mp1si2 > div > div.ow-comparison-table.bullets-list > div.desktop.products-3 > table > tbody > tr.summary.top.values > td:nth-child(2) > div > div > ul:nth-child(3)'
        ).style.height = `${adjustSection1 - 66}px`;

        document.querySelector(
            '#office-ComparisonTable-1mp1si2 > div > div.ow-comparison-table.bullets-list > div.desktop.products-3 > table > tbody > tr.summary.top.values > td:nth-child(3) > div > div > ul:nth-child(3)'
        ).style.height = `${adjustSection1 - 66}px`;
    };

    if (document.getElementById('adobe-target-primary-section')) {
        switchTab();
        ServiceValues();
        mobileSlider();

        window.addEventListener('resize', adjustSection);
    }
};

init();