(function (win, doc) {
    'use strict';

    const sliderClassNames = {
        slider1: '.js-splide1',
        slider2: '.js-splide2'
    };

    class ControlSlider {
        constructor() {
            this.config = {
                pauseLabel: null,
                playLabel: null
            };

            this.classNames = {
                toggleButton: 'js-splide-toggleButton',
                text: 'js-splide-controllerButtonText',
                buttonArrow: 'js-splide-buttonArrow',
                isActive: 'is-active'
            };

            this.selectors = {
                toggleButton: `.${this.classNames.toggleButton}`,
                text: `.${this.classNames.text}`,
                buttonArrow: `.${this.classNames.buttonArrow}`
            };

            this.sliderOptions = {
                arrows: true,
                autoplay: true,
                classes: {
                    arrows: 'splide__arrows lp-splide-buttonArrow-wrapper',
                    arrow: 'splide__arrow lp-splide-buttonArrow js-splide-buttonArrow',
                    prev: 'splide__arrow--prev lp-splide-buttonArrow-prev',
                    next: 'splide__arrow--next lp-splide-buttonArrow-next',
                    page: 'splide__pagination__page js-splide1-page'
                },
                gap: 8,
                interval: 4000,
                pagination: true,
                paginationKeyboard: true,
                pauseOnFocus: false,
                pauseOnHover: false,
                rewind: true,
                rewindByDrag: true,
                slideFocus: false,
                type: 'loop'
            };

            this.thumbnailOptions = {
                arrows: false,
                autoplay: true,
                cover: true,
                drag: false,
                focus: 'left',
                gap: 12,
                isNavigation: true,
                pagination: false,
                pauseOnFocus: false,
                pauseOnHover: false,
                perPage: 4,
                rewind: true,
                rewindByDrag: true,
                role: 'group',
                slideFocus: false
            };

            this.slider = new Splide(sliderClassNames.slider1, this.sliderOptions); 
            this.thumbnail = new Splide(sliderClassNames.slider2, this.thumbnailOptions); 
            this.toggleButton = doc.querySelector(this.selectors.toggleButton);
            this.text = doc.querySelector(this.selectors.text);
            this.buttonArrow = doc.querySelector(this.selectors.buttonArrow);
        }

        init() {
            if (!this.slider && !this.thumbnail) {
                return;
            }

            this.setSlide();
            this.restartAutoPlay();
            this.setButtonText();
            this.removeAriaLabel();
            this.removeAriaRoledescription();
            this.removeAriaLabelForThumbnail();
            this.removeAriaRoledescriptionForThumbnail();
            this.changeSlide();
            this.clickToggleButton();
            this.controlAriaAttr();
            this.removeRoleAttr();
        }

        setSlide() {
            this.slider.sync(this.thumbnail);
            this.slider.mount();
            this.thumbnail.mount();
        }

        restartAutoPlay() {
            const {Autoplay} = this.slider.Components;

            Autoplay.pause();
            setTimeout(() => {
                Autoplay.play();
            });
        }


        setButtonText() {
            if (!this.text) {
                return;
            }

            this.config.pauseLabel = this.text.dataset.pauselabel;
            this.config.playLabel = this.text.dataset.playlabel;
        }

        removeAriaLabel() {
            const root = this.slider.root;

            if (!root) {
                return;
            }

            const ariasFromRoot = root.hasAttribute('aria-label') ? [root] : [];
            const ariasFromDescendants = Array.from(root.querySelectorAll('[aria-label]'));
            const arias = [...ariasFromRoot, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-label');
            });
        }

        removeAriaRoledescription() {
            const root = this.slider.root;

            if (!root) {
                return;
            }

            const ariasFromRoot = root.hasAttribute('aria-roledescription') ? [root] : [];
            const ariasFromDescendants = Array.from(root.querySelectorAll('[aria-roledescription]'));
            const arias = [...ariasFromRoot, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-roledescription');
            });
        }

        removeAriaLabelForThumbnail() {
            const root = this.thumbnail.root;

            if (!root) {
                return;
            }

            const ariasFromRoot = root.hasAttribute('aria-label') ? [root] : [];
            const ariasFromDescendants = Array.from(root.querySelectorAll('[aria-label]'));
            const arias = [...ariasFromRoot, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-label');
            });
        }

        removeAriaRoledescriptionForThumbnail() {
            const root = this.thumbnail.root;

            if (!root) {
                return;
            }

            const ariasFromRoot = root.hasAttribute('aria-roledescription') ? [root] : [];
            const ariasFromDescendants = Array.from(root.querySelectorAll('[aria-roledescription]'));
            const arias = [...ariasFromRoot, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-roledescription');
            });
        }

        removeAriaLabelForToggleButton() {
            if (!this.toggleButton) {
                return;
            }

            const toggleButton = this.toggleButton;

            const ariasFromToggleButton = toggleButton.hasAttribute('aria-label') ? [toggleButton] : [];
            const ariasFromDescendants = Array.from(toggleButton.querySelectorAll('[aria-label]'));
            const arias = [...ariasFromToggleButton, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-label');
            });
        }

        removeAriaLabelForButtonArrow() {
            if (!this.buttonArrow) {
                return;
            }

            const buttonArrow = this.buttonArrow;

            const ariasFromButtonArrow = buttonArrow.hasAttribute('aria-label') ? [buttonArrow] : [];
            const ariasFromDescendants = Array.from(buttonArrow.querySelectorAll('[aria-label]'));
            const arias = [...ariasFromButtonArrow, ...ariasFromDescendants];

            arias.forEach((aria) => {
                aria.removeAttribute('aria-label');
            });
        }

        changeSlide() {
            this.slider.on('moved', () => {
                this.removeAriaLabelForToggleButton();
                this.removeAriaLabelForButtonArrow();
            });
        }

        clickToggleButton() {
            if (!this.toggleButton || !this.text) {
                return;
            }

            const toggleButton = this.toggleButton;
            const text = this.text;
            const {Autoplay} = this.slider.Components;

            toggleButton.addEventListener('click', () => {
                if (toggleButton.classList.contains(this.classNames.isActive)) {
                    Autoplay.play();
                    text.innerHTML = this.config.pauseLabel;
                    this.removeAriaLabelForToggleButton();
                    this.removeAriaLabelForButtonArrow();
                } else {
                    Autoplay.pause();
                    text.innerHTML = this.config.playLabel;
                    this.removeAriaLabelForToggleButton();
                    this.removeAriaLabelForButtonArrow();
                }
            });
        }

        controlAriaAttr() {
            const root = this.slider.root;
            const buttonPage = root.querySelectorAll('.js-splide1-page');

            buttonPage.forEach((button, index) => {
                button.setAttribute('aria-label', index + 1);
            });
        }

        removeRoleAttr() {
            const root = this.slider.root;

            if (!root) {
                return;
            }

            const rolesFromDescendants = Array.from(root.querySelectorAll('[role="tabpanel"]'));
            const roles = [...rolesFromDescendants];

            roles.forEach((role) => {
                role.removeAttribute('role');
            });
        }
    }

    doc.addEventListener('DOMContentLoaded', () => {
        const controlSlider = new ControlSlider();

        if (win.xmFlexibleInstallationSlider === true) {
            return;
        }

        controlSlider.init();

        win.xmFlexibleInstallationSlider = true;
    });
}(window, document));