(function ($) {
    "use strict";

    jQuery(document).ready(function () {
        swipers();
        videoPopup();
        videoHandler();
        displayPeople(people);
        showAllPeople();
        peoplePopup();
        toggleClassMobile('.people-list__item');
        animationWords('.animated-word-container .animated-word');
    });

    /**
    * Swiper sliders init
    */
    function swipers() {

        // On Tablet and desktop
        if (window.innerWidth > 767) {
            const videosSwiper = new Swiper(".videos-swiper", {
                slidesPerView: 2,
                spaceBetween: 24,
                scrollbar: {
                    el: ".videos-swiper .swiper-scrollbar",
                    hide: false,
                    draggable: true,
                },
                navigation: {
                    nextEl: ".videos-swiper .labas-nav-arrow-next",
                    prevEl: ".videos-swiper .labas-nav-arrow-prev",
                }
            });
        }
    };


    /**
     * Handle lottie animations in page
     */
    const lottieAnimations = () => {

        var animation = bodymovin.loadAnimation({
            container: document.getElementById('tekstas'), 
            // path: 'https://labas.lt/sites/default/files/landings/labiausiai-uz-tave/tekstas.json', 
            path: './src/img/tekstas.json', 
            renderer: 'svg', 
            loop: true, 
            autoplay: true, 
        });
    };

    /**
     * Handle behavior of video popup
     */
    const videoPopup = () => {
        var $iframe = $(".custom-popup").find('.js-videoIframe');

        // Show popup
        $(".show-video").click(function(e) {
            e.preventDefault();

            const dataSRC =  $(this).data("src");

            console.log(dataSRC);

            // add iframe src in, starting the video
            $iframe.attr('src', dataSRC);

            // Open popup
            $("body, html").addClass("noscroll");
            $("html").css("overflow", "hidden");
            $(".custom-popup__overlay").fadeIn(300);
            $(".custom-popup").fadeIn(300);
        });

        // Close popup
        $(".custom-popup__close, .custom-popup__overlay").click(function() {
            $("body, html").removeClass("noscroll");
            $("html").css("overflow", "auto");
            $(".custom-popup__overlay").fadeOut(300);
            $(".custom-popup").fadeOut(300);
            $iframe.removeAttr( "src" )
        });
    };


    function videoHandler() {
        // poster frame click event
        $(document).on('click', '.js-videoPoster', function (ev) {
            ev.preventDefault();
            var $poster = $(this);
            var $wrapper = $poster.closest('.js-videoWrapper');
            videoPlay($wrapper, $poster);
        });
    }

    // play the targeted video (and hide the poster frame)
    function videoPlay($wrapper, $poster) {
        var $iframe = $wrapper.find('.js-videoIframe');
        var src = $iframe.data('src');
        // hide poster
        $poster.addClass('videoWrapperActive');
        // add iframe src in, starting the video
        $iframe.attr('src', src);
    }

    /**
     * Display people html from json file
     */
    const displayPeople = (people) => {
        shuffleArray(people);

        // Loop through the people array
        people.forEach(function(person, index) {
            let html = '';

            // Generate HTML content for each person
            if (person.instagram !== null) {
                html = `
                    <div class="people-list__item">
                        <div class="people-list__block">
                            <div class="people-list__image">
                                <img src="${person.image}" alt="${person.name}">
                            </div>
                            <div class="people-list__description">
                                <p>
                                    ${person.description}
                                </p>
                            </div>
                        </div>
                        <div class="people-list__link">
                            <img src="https://labas.lt/sites/default/files/landings/labiausiai-uz-tave/icon-insta.svg" alt="Instagram ikona">
                            <a href="${person.link}" target="_blank">${person.instagram}</a>
                        </div>
                    </div>
                `;
            } else {
                html = `
                <div class="people-list__item">
                    <div class="people-list__block">
                        <div class="people-list__image">
                            <img src="${person.image}" alt="${person.name}">
                        </div>
                        <div class="people-list__description">
                            <p>
                                ${person.description}
                            </p>
                        </div>
                    </div>
                    <div class="people-list__link">
                        <a href="${person.link}" target="_blank">Aplankyk puslapį</a>
                        <img src="https://labas.lt/sites/default/files/landings/labiausiai-uz-tave/icon-link.svg" alt="">
                    </div>
                </div>
            `;
            }

            
            // Append the generated HTML to the container
            $('.people-list').append(html);

            //Constrain categories list height and add styling
            // if ($('.people-list__categories').eq(index).height() > 39) $('.people-list__categories').eq(index).addClass('limited');
        });
    };

    /**
     * Display all people block from click
     */
    const showAllPeople = () => {
        $('.show-all').on('click',function (e) {
            e.preventDefault();
            $(this).addClass('hidden');

            $('.people-list').addClass('expanded');
            $('.people-content__count').addClass('hidden');
            $('.btn-landing.show-all-hide').removeClass('hidden');
        });

        $('.show-all-hide').on('click',function (e) {
            e.preventDefault();
            $(this).addClass('hidden');

            $('.people-list').removeClass('expanded');
            $('.people-content__count').removeClass('hidden');
            $('.btn-landing.show-all').removeClass('hidden');
        });
    };

	/**
	 * Vote for nominee with ajax
	 */
	const peoplePopup = () => {
		$(document).on( 'click', '.show-popup',  function (e) {
			e.preventDefault;

			const itemContainer   = $(this).parent();
			const itemEmail  	  = itemContainer.attr('data-email');
            const itemLink  	  = itemContainer.attr('data-linkedin');
            const itemDescription = itemContainer.attr('data-description');
			const itemImage       = itemContainer.find('.people-list__image').attr('src');
			const itemName        = itemContainer.find('.people-list__title').html();
			const itemCategories  = itemContainer.find('.people-list__categories').html();

            console.log(itemLink);

			// set data
			$('.custom-popup-content__image img').attr('src', itemImage );
            $('.custom-popup-content__image img').attr('alt', `Fotografija: ${itemName}`);
			$('.custom-popup-content-block__title').html(itemName);
            $('.custom-popup-content-block__categories').html(itemCategories);
            $('.custom-popup-content-block__description').html(itemDescription);
            $('.custom-popup-content-block p a').attr('href', `mailto:${itemEmail}`);
            $('.custom-popup-content-block p a').html(itemEmail);
			$('.custom-popup-content-block__btns .email').attr('href', `mailto:${itemEmail}`);

            if ( itemLink != 'false') {
                $('.custom-popup-content-block__btns .linked-in').removeClass('hidden');
                $('.custom-popup-content-block__btns .linked-in').attr('href', itemLink);
            } else {
                $('.custom-popup-content-block__btns .linked-in').addClass('hidden');
            }

            // Open popup
            $("body, html").addClass("noscroll");
            $(".custom-popup__overlay").fadeIn(300);
            $(".custom-popup").fadeIn(300);
			
		});

        // Close popup
        $(".custom-popup__close, .custom-popup__overlay").on( 'click', function(e) {
            e.preventDefault();
            $("body, html").removeClass("noscroll");
            $(".custom-popup__overlay").fadeOut(300);
            $(".custom-popup").fadeOut(300);
        });
	}

    /* Randomize array in-place using Durstenfeld shuffle algorithm */
    const shuffleArray= (array) => {
        let currentIndex = array.length;
      
        // While there remain elements to shuffle...
        while (currentIndex != 0) {
      
          // Pick a remaining element...
          let randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex--;
      
          // And swap it with the current element.
          [array[currentIndex], array[randomIndex]] = [
            array[randomIndex], array[currentIndex]];
        }
    }

    /**
     * Toggle element class on click mobile
     */
    const toggleClassMobile = (item) => {
        // On Mobile
        if (window.innerWidth <= 767) {
            $(item).on('click', function() {
                $(this).toggleClass('active');
            });
        }
    };

    /**
     * Function for animating words
     */
    const animationWords = (word) => {
        const words = document.querySelectorAll(word);
        const wordCount = words.length;
        const animationDuration = 1700;
        let currentIndex = 0;

        function updateClasses() {
            // Remove all transition classes
            words.forEach(word => {
                word.classList.remove("previous", "current", "next");
            });

            // Determine the indices for previous, current, and next
            const prevIndex = (currentIndex - 1 + wordCount) % wordCount;
            const nextIndex = (currentIndex + 1) % wordCount;

            // Update the class for each word
            words[prevIndex].classList.add("previous");
            words[currentIndex].classList.add("current");
            words[nextIndex].classList.add("next");

            // Move to the next word
            currentIndex = nextIndex;
        }

        // Initialize the first set of classes
        updateClasses();

        // Update classes animationDuration miliseconds;
        setInterval(updateClasses, animationDuration);
    };
})(jQuery);