var registerForm = document.getElementById("register-form");
const mobileToggler = document.getElementById('mobile-toggler');
const video = document.getElementById('rhymes-video');
var pswEl = document.getElementById("password");
var emailEl = document.getElementById("email");
var rotateIndex = 1;
var rotateText = ["to overcome writer's block", "to inspire your creativity", "as an educational tool"];
var rotateSpan = document.getElementById("rotate-text");
var loginPage = document.querySelector('h6');
const firstLink = document.querySelector('#see-it-work-click');
const secondLink = document.querySelector('#hear-examples-click');
var iframe = document.querySelector("#soundcloud-section iframe");
var youtubeVideoLoad = document.querySelectorAll(".youtube-video-load");
const options = {
    rootMargin: '0px',
    threshold: 0.5
};
const promoInput = document.getElementById('promo');
const promoMessage = document.getElementById('promoMessage');


const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && video.getAttribute('data-played') === 'false') {
            video.play();
            video.setAttribute('data-played', 'true');
        }
    });
}, options);

// ******************** ******************** ********************
if (firstLink) {
    firstLink.addEventListener('click', function (e) {
        e.preventDefault();
        const projectsSection = document.querySelector('#youtube-section-lyrics');
        projectsSection.scrollIntoView({behavior: 'smooth', block: 'center'});
    });
}

if (secondLink) {
    secondLink.addEventListener('click', function (e) {
        e.preventDefault();
        const musicCoWriterSection = document.querySelector('#soundcloud-section');
        musicCoWriterSection.scrollIntoView({behavior: 'smooth', block: 'center'});
    });
}


window.addEventListener('DOMContentLoaded', event => {

    const sessionExp = document.getElementById('session-expired');
    if (sessionExp) {
        console.log(sessionExp);
        sessionExpired()
    }

    var navbarShrink = function () {
        const navbarCollapsible = document.body.querySelector('#mainNav');
        if (!navbarCollapsible) {
            return;
        }
        if (window.scrollY === 0) {
            navbarCollapsible.classList.remove('navbar-shrink');
        } else {
            navbarCollapsible.classList.add('navbar-shrink');
          }
    };

    navbarShrink();
    document.addEventListener('scroll', navbarShrink);

    // Collapse responsive navbar when toggler is visible
    const navbarToggler = document.body.querySelector('.navbar-toggler');
    const responsiveNavItems = [].slice.call(
        document.querySelectorAll('#navbarResponsive .nav-link')
    );
    responsiveNavItems.map(function (responsiveNavItem) {
        responsiveNavItem.addEventListener('click', () => {
            if (window.getComputedStyle(navbarToggler).display !== 'none') {
                navbarToggler.click();
            }
        });
    });

    if (video) {
        observer.observe(video);
    }

    if (iframe) {
        iframe.src = "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1561135021&color=%23c797f5&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true";
    }

    if (youtubeVideoLoad) {
        youtubeVideoLoad.forEach(function(video) {
            if (video.getAttribute('data-src')) {
                video.setAttribute('src', video.getAttribute('data-src'));
            }
        });
    }
});



if (rotateSpan) {
    rotateSpan.innerHTML = rotateText[0];
    rotateSpan.style.opacity = 1;
    setInterval(function () {
        rotateIndex = (rotateIndex + 1) % rotateText.length;
        rotateSpan.style.opacity = 0;
        setTimeout(function () {
            rotateSpan.innerHTML = rotateText[rotateIndex];
            rotateSpan.style.transitionDuration = "1s";
            rotateSpan.style.opacity = 1;
            rotateSpan.style.transform = "translateY(0)";
        }, 1000);
        rotateSpan.style.transform = "translateY(20px)";
    }, 4500);
}

window.addEventListener('load', function () {
    if (emailEl) {
        emailEl.addEventListener('blur', checkGmail);
        if (pswEl) {
            pswEl.addEventListener('blur', validatePassword);

        }
    }

});
if (mobileToggler) {
    mobileToggler.addEventListener('click', function () {
        const navbar = document.querySelector('#navbarResponsive');
        navbar.classList.toggle('collapse');

        const navbarCollapsible = document.querySelector('.navbar');
        const navbarNav = document.querySelector('.navbar-nav');
        const navbarHrs = document.querySelectorAll('.navbar-hr');

        if (navbar.classList.contains('collapse')) {
            navbarCollapsible.classList.remove('navbar-border');
            navbarNav.classList.remove('my-5');
            navbarHrs.forEach(hr => hr.classList.add('d-none'));
        } else {
            navbarCollapsible.classList.add('navbar-border');
            navbarNav.classList.add('my-5');
            navbarHrs.forEach(hr => hr.classList.remove('d-none'));
        }
    });
}




if (promoInput) {
    let timeoutId = null;
    promoInput.addEventListener('input', async (event) => {
        clearTimeout(timeoutId); // clear the existing timeout
        timeoutId = setTimeout(async () => {
            const promoCode = event.target.value;
            try {
                const response = await fetch('/promo_check?promoCode=' + promoCode, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                if (data.isValid) {
                    promoMessage.classList.remove('promowarnings', 'error');
                    promoMessage.classList.add('promowarnings', 'success');
                    promoMessage.textContent = 'Promo Applied!';
                } else {
                    promoMessage.classList.remove('promowarnings', 'success');
                    promoMessage.classList.add('promowarnings', 'error');
                    promoMessage.textContent = 'Invalid Promo Code';
                }
                promoMessage.style.display = 'block';
            } catch (error) {
                console.error('Error:', error);
            }
        }, 2000);
    });
}




// ******************** ******************** ********************

function validatePassword() {
    var pswEl = document.getElementById("password");
    var pswErrorEl = document.getElementById("pswError");

    if (loginPage) {
        if (loginPage.innerText !== "Login") {
            if (pswEl.value.length < 8) {
                pswErrorEl.style.display = "inline";
                pswErrorEl.style.fontSize = "0.7em";
                // pswErrorEl.style.paddingLeft = "0.8em";
                pswEl.setCustomValidity("Password must be at least 8 characters long");
            } else {
                pswErrorEl.style.display = "none";
                pswEl.setCustomValidity("");
            }
        }
    }
}

function checkGmail() {
    var emailErrorEl = document.getElementById("emailError");

    if (loginPage) {
        if (loginPage.innerText !== "Login") {
            if (emailEl.value.includes('gamil')) {
                emailErrorEl.style.display = "inline";
                emailErrorEl.style.fontSize = "0.8em";
                emailErrorEl.style.paddingLeft = "0.8em";
                emailEl.setCustomValidity("Did you mean gamil?");
            } else {
                emailErrorEl.style.display = "none";
                emailEl.setCustomValidity("");
            }
        }
    }
}


function sessionExpired() {
    swal.fire({
        title: `Session Expired`,
        text: `Please login again to continue`,
        showCancelButton: false,
        confirmButtonText: "<a href='/login-page' class='text-white' style='text-decoration: none'>Login</a>",
    })
}