(function () {
    'use strict'

    /* Toggle password */
    const togglePasswords = document.querySelectorAll('.toggle-password');

    Array.from(togglePasswords).forEach(function (togglePassword) {
        togglePassword.addEventListener('click', () => {
            const password = togglePassword.parentNode.querySelector('.field-password');
            const type =
                password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            password.classList.toggle('show-password');
        });
    });

    /* Select */
    window.InitSelect2 = function() {
        $('.select2-init').removeClass('select2-init').select2({
            minimumResultsForSearch: -1,
        });
        $(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
            $('.select2-results__options').each(function (index, el) {
                new SimpleBar(el);
            });
        });
    };

    /* Mobile menu */
    document.querySelector('.navbar__toggle').addEventListener('click', () => {
        document.querySelector('.navbar__toggle').classList.toggle('off');
        document.querySelector('.navbar__content').classList.toggle('open');
    });

    if (document.querySelector('.dropdown-menu-dark')) {
        function changeDropdownMenu() {
            if (window.innerWidth < 1200){
                document.querySelector('.dropdown-menu-dark').classList.remove('dropdown-menu');
            } 
            else{
                document.querySelector('.dropdown-menu-dark').classList.add('dropdown-menu');
            } 
        }

        window.addEventListener('resize', () => {
            changeDropdownMenu()
        });
        document.addEventListener("DOMContentLoaded", () => {
            changeDropdownMenu()
        });
    }


    /* Sliders */
    if (document.querySelector('.video-card-swiper')) {
        const videoCard = new Swiper('.video-card-swiper', {
            slidesPerView: 'auto',
            freeMode: true,
            spaceBetween: 20,
            loop: false,
        });
    }

    if (document.querySelector('.songs-swiper')) {
        const songs = new Swiper('.songs-swiper', {
            slidesPerView: 1,
            grid: {
                rows: 2,
            },
            loop: false,
            navigation: {
                nextEl: ".songs-button-next",
                prevEl: ".songs-button-prev",
            },
            breakpoints: {
                992: {
                    slidesPerView: 3,
                },
                700: {
                    slidesPerView: 2,
                }
            }
        });
    }

    if (document.querySelector('.main-exercises-swiper')) {
        const mainCollections = new Swiper('.main-exercises-swiper', {
            slidesPerView: 'auto',
            spaceBetween: 10,
            grid: false,
            loop: false,
            breakpoints: {
                992: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                    grid: {
                        rows: 2,
                    },
                }
            }
        });
    }

    if (document.querySelector('.main-collections-swiper')) {
        const mainCollections = new Swiper('.main-collections-swiper', {
            slidesPerView: 'auto',
            spaceBetween: 10,
            grid: false,
            loop: false,
            breakpoints: {
                992: {
                    slidesPerView: 3,
                    spaceBetween: 0,
                    grid: {
                        rows: 2,
                    },
                }
            }
        });
    }

    if (document.querySelector('.vertical-swiper1')) {
        let vertical1 = undefined;
        const screenWidth = window.innerWidth;
        const imgClipBox = document.querySelector('.clip-box img')

        function initSwiper() {
            if(screenWidth > 991 && vertical1 == undefined) {           
                vertical1 = new Swiper('.vertical-swiper1', {
                    direction: 'vertical',
                    mousewheelControl: true,
                    slidesPerView: 'auto',
                    initialSlide : 1.5,
                    freeMode: true,
                    grid: {
                        rows: 2,
                    },
                    loop: false,
                    mousewheel: {
                        invert: false,
                    },
                });
            } else if (screenWidth < 990 && vertical1 != undefined) {
                vertical1.destroy();
                vertical1 = undefined;         
            }        
        }

        function setMainSliderHeight() {
            const imgHeight = document.querySelector('.clip-box').offsetHeight;
            if(screenWidth > 991) {
                document.querySelector('.vertical-swiper1').style.height = imgHeight + 'px';
                document.querySelector('.vertical-swiper1-wrapper').style.transform = 'translate3d(0px, -300px, 0px)';
            } else {
                document.querySelector('.vertical-swiper1').style.height = '100%';
                document.querySelector('.vertical-swiper1-wrapper').style.transform = 'none';
            }

            const verticalSlides = document.querySelectorAll('.vertical-swiper1-slide');
            Array.from(verticalSlides).forEach(function (verticalSlide) {
                const slideHeight = verticalSlide.querySelector('.style-main-card').offsetHeight + 20;
                verticalSlide.style.height = slideHeight + 'px';
            })
        }

        function setBgImage() {
            const slideImages = document.querySelectorAll('.vertical-swiper1-slide');
            Array.from(slideImages).forEach(function (slideImage) {
                const slideImageUrl = slideImage.querySelector('img').src;
                if(screenWidth < 992) {
                    slideImage.style.backgroundImage = 'url(' + slideImageUrl + ')';
                } else {
                    slideImage.style.backgroundImage = 'none';
                }
            })
        }

        imgClipBox.addEventListener('load', () => {
            setMainSliderHeight();
        });
        
        document.addEventListener("DOMContentLoaded", () => {
            setMainSliderHeight();
            initSwiper();
            setBgImage();
        });

        window.addEventListener('resize', () => {
            setMainSliderHeight();
            initSwiper();
            setBgImage();
        });
    }

    if (document.querySelector('.vertical-swiper2')) {
        const screenWidth = window.innerWidth;
        const imgClipBox2 = document.querySelector('.clip-box2 img')
        function setExercisesSliderHeight() {
            const imgHeight = document.querySelector('.clip-box2').offsetHeight;
                if(screenWidth > 991) {
                    document.querySelector('.vertical-swiper2').style.height = imgHeight + 'px';
                 } else {
                     document.querySelector('.vertical-swiper2').style.height = 'auto';
                 }

            const vertical2Slides = document.querySelectorAll('.vertical-swiper2-slide');
            Array.from(vertical2Slides).forEach(function (vertical2Slide) {
                const slideHeight2 = vertical2Slide.querySelector('.exercise-card').offsetHeight + 20;
                vertical2Slide.style.maxHeight = slideHeight2 + 'px';
            })
        }

        imgClipBox2.addEventListener('load', () => {
            setExercisesSliderHeight();
        });

        document.addEventListener("DOMContentLoaded", () => {
            setExercisesSliderHeight();
        });
        
        window.addEventListener('resize', () => {
            setExercisesSliderHeight();
        });

        const vertical2 = new Swiper('.vertical-swiper2', {
            direction: 'horizontal',
            mousewheelControl: false,
            slidesPerView: 'auto',
            spaceBetween: 10,
            freeMode: false,
            loop: false,
            mousewheel: {
                invert: false,
            },
            breakpoints: {
                992: {
                    direction: 'vertical',
                    mousewheelControl: true,
                    slidesPerView: 'auto',
                    spaceBetween: 0,
                }
            }
        });
    }

    if (document.querySelector('.vertical-swiper3')) {
        let screenWidth = window.innerWidth;
        const vertical3 = new Swiper('.vertical-swiper3', {
            direction: 'horizontal',
            mousewheelControl: false,
            slidesPerView: 'auto',
            freeMode: true,
            spaceBetween: 10,
            grid: false,
            loop: false,
            mousewheel: {
                invert: false,
            },
            breakpoints: {
                992: {
                    direction: 'vertical',
                    mousewheelControl: true,
                    slidesPerView: 'auto',
                    spaceBetween: 0,
                    grid: {
                        rows: 2,
                    },
                }
            }
        });

        function setCollectionsSliderHeight() {
            const imgHeight = document.querySelector('.clip-box3').offsetHeight;
            
            if(screenWidth > 991) {
                document.querySelector('.vertical-swiper3').style.height = imgHeight + 'px';
            } else {
                document.querySelector('.vertical-swiper3').style.height = 'auto';
            }

            const vertical3Slides = document.querySelectorAll('.vertical-swiper3-slide');
            Array.from(vertical3Slides).forEach(function (vertical3Slide) {
                const slideHeight3 = vertical3Slide.querySelector('.video-card--style2').offsetHeight + 20;
                vertical3Slide.style.maxHeight = slideHeight3 + 'px';
            })
        }
        
        window.addEventListener('resize', () => {
            setCollectionsSliderHeight()
        });
        document.addEventListener("DOMContentLoaded", () => {
            setCollectionsSliderHeight()
        });
    }

    if (document.querySelector('.select-style')) {
        const swiperSelectStyle = new Swiper('.select-style', {
            slidesPerView: 'auto',
            cssWidthAndHeight: true,
            freeMode: true,
            freeModeFluid: true,
            spaceBetween: 40,
        });
    }
    

    /* Copy song */
    const copyBtns = document.querySelectorAll(".song-item__btn");
    Array.from(copyBtns).forEach(function (copyBtn) {
        copyBtn.addEventListener('click', () => {
            const copyText = copyBtn.previousElementSibling.innerText;
            const el = document.createElement('textarea');
            el.value = copyText;
            el.setAttribute('readonly', '');
            el.style.position = 'absolute';
            el.style.left = '-9999px';
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        })
    })

})()