//Accordion faq script START
var acc = document.getElementsByClassName("faq-triger");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
//Accordion faq script END

//Tiny slider news page START
var newsSliderBox = document.querySelector(".news-slider");
if (newsSliderBox) {
    var slider = tns({
        container: '.news-slider',
        items: 4,
        slideBy: 'page',
        controls: true,
        mouseDrag: true,
        nav:false,
        controlsText: ["", ""],
        loop: false,
        responsive: {
            320: {
                items:1
            },
            500: {
                items: 2
            },
            768: {
                items: 3
            },
            1024: {
                items: 4
            }
        }
    });
}
//Tiny slider news page END


//Tiny slider banner START
var mySliderBox = document.querySelector(".my-slider");
if (mySliderBox) {
    var slider = tns({
        container: '.my-slider',
        items: 1,
        slideBy: 'page',
        mode: 'gallery',
        controls: false,
        mouseDrag: true,
        autoplay: true,
        nav: true,
        speed: 300,
        autoplayText: ['', '']
    });
}
//Tiny slider banner END

document.addEventListener("DOMContentLoaded", readyHTML);
function readyHTML() {
    up_button();
}

function up_button() {
    var up_button = document.createElement('img');
    var body = document.querySelector('body');
    body.appendChild(up_button);
    up_button.src = '/wp-content_files/to_top.svg';
    up_button.alt = 'to_top';
    up_button.style.opacity = "0";
    up_button.className = "up_button";

    window.onscroll = function() {
        var scrolled = window.pageYOffset || document.documentElement.scrollTop;
        var h = window.innerHeight;
        if (scrolled > 0.2*h) {
            up_button.style.opacity = "1";
            up_button.style.cursor = "pointer";
            up_button.addEventListener('click',to_top)
        }
        else {
            up_button.style.opacity = "0";
            up_button.style.cursor = "inherit";
            up_button.removeEventListener('click',to_top)
        }
    };
    function to_top() {
        var start = Date.now();
        var timer = setInterval(function() {
            var timePassed = Date.now() - start;
            var time = 1000;
            var scrolled = window.pageYOffset || document.documentElement.scrollTop;
            if (timePassed >= time || scrolled <= 0) {
                clearInterval(timer);
                return;
            }
            up (timePassed,time,scrolled);
        }, 10);
        function up(timePassed,time,scrolled) {
            if (scrolled > 0) {
                var x = scrolled - (scrolled*timePassed/(2*time));
                window.scrollTo(0,x);
            }
        }
    }
}

function interactiveForm(formClass, formType, fields) {
    try {
        const form = document.querySelector(formClass),
            mainButton = form.querySelectorAll('.interactive_form_button')[0],
            final = form.querySelectorAll('.interactive_form_final')[0],
            fieldsList = form.querySelectorAll(fields);

        fieldsList.forEach(function(e) {
                e.addEventListener('click', function() {
                    if(e.classList[0] === 'game_input') {
                        e.classList.add('active');
                        if(form.querySelectorAll('input:checked')[0]) {
                            form.querySelectorAll('input:checked')[0].checked = false;
                        }
                    } else {
                        if( form.querySelectorAll('.game_input')[0]) {
                            form.querySelectorAll('.game_input')[0].classList.remove('active');
                        }

                    }
                    activateButton();
                });
        });

        function activateButton() {
            if(checkFields()) {
                mainButton.classList.add('active');
                mainButton.addEventListener('click', function() {
                    final.classList.add('active');
                });
            }
        }

        function checkFields() {
            switch (formType) {
                case 'recognize':
                    if(form.querySelectorAll('input[name="site"]:checked')[0] && form.querySelectorAll('input[name="ia"]:checked')[0]) {
                        return true;
                    }
                    break;

                case 'choose':
                    if(form.querySelectorAll('input[name="game_choice"]:checked')[0] ||
                        form.querySelectorAll('.game_input')[0].value.length > 0 ) {
                        return true;
                    }
                    break;
                default:
                    return false;
            }

        }

    } catch(e) {
        console.log(e);
    }
}

function questionsForm() {
    try {
        const form = document.querySelector('.interactive_form_cards'),
            cardsList = form.querySelectorAll('.interactive_form_body_cards_item'),
            cardsLength = cardsList.length,
            fieldsList = form.querySelectorAll('input'),
            final = form.querySelectorAll('.interactive_form_final')[0];

        let cardNumber = 0;

        activeCard(cardNumber);

        function activateButton(cardNum, cardItem) {
            let cardInput = cardsList[cardNum].querySelector('input'),
                cardButton = cardsList[cardNum].querySelector('.interactive_form_button');

            if(cardInput.value.length === 1 || cardItem) {
                cardButton.classList.add('active');
                cardButton.addEventListener('click', function() {
                    if(cardNum === cardsList.length - 1) {
                        final.classList.add('active');
                    } else {
                        cardNumber = cardNumber + 1;
                        activeCard(cardNumber);
                    }
                });
            }

        }


        function activeCard(num) {
            let cardButton = cardsList[num].querySelector('.interactive_form_button'),
                check = false;
            cardsList.forEach(function(item) {
                item.classList.remove('active');
            });

            cardsList[num].classList.add('active');

            cardsList[num].querySelector('input').addEventListener('input', function() {
                activateButton(num);
            });

            cardsList[num].querySelectorAll('.question_choice').forEach(item => {
                item.addEventListener('click', function() {
                    if (!check) {
                        activateButton(num, item);
                        check = true;
                    }
                });
            })

            if(cardNumber === cardsLength - 1) {
                cardButton.textContent = 'отправить ответы';
                cardButton.classList.remove('interactive_form_button_next');
            }
        }



    } catch (e) {
        console.log(e);
    }
}

interactiveForm('.interactive_form_recognize', 'recognize', 'input');
interactiveForm('.interactive_form_games', 'choose', 'input');
questionsForm();