function toggleBlinkingArrows() {
    var arrowOne = document.getElementById('arrowOne');
    var arrowTwo = document.getElementById('arrowTwo');
    var arrowThree = document.getElementById('arrowThree');
    var arrowFour = document.getElementById('arrowFour');

    arrowOne.classList.toggle('hidden');
    arrowTwo.classList.toggle('hidden');
    arrowThree.classList.toggle('hidden');
    arrowFour.classList.toggle('hidden');
}

var arrowOne = document.getElementById('arrowOne');
if ((arrowOne !== null)) {
    setInterval(toggleBlinkingArrows, 500); // Adjust the interval (in milliseconds) as desired
}

function toggleMobileNav() {
    var mobileNavOpen = document.getElementById('mobileNavOpen');
    var mobileNavClose = document.getElementById('mobileNavClose');
    var mobileMenu = document.getElementById('mobile-menu');

    if (mobileNavOpen.classList.contains('hidden')) {
        mobileNavOpen.classList.add('block');
        mobileNavOpen.classList.remove('hidden');
    } else {
        mobileNavOpen.classList.add('hidden');
        mobileNavOpen.classList.remove('block');
    }

    if (mobileNavClose.classList.contains('hidden')) {
        mobileNavClose.classList.add('block');
        mobileNavClose.classList.remove('hidden');
    } else {
        mobileNavClose.classList.add('hidden');
        mobileNavClose.classList.remove('block');
    }

    if (mobileMenu.classList.contains('hidden')) {
        mobileMenu.classList.remove('hidden');
    } else {
        mobileMenu.classList.add('hidden');
    }
}

function toggleSideNav() {
    var sideMenu = document.getElementById('sideMenu');
    sideMenu.classList.toggle('w-0');
    sideMenu.classList.toggle('h-0');

    // First
    var sideAnim = document.getElementById('sideAnim');
    sideAnim.classList.toggle('hidden');

    if (sideAnim.classList.contains('opacity-0')) {
        sideAnim.classList.add('opacity-100');
        sideAnim.classList.remove('opacity-0');
    } else {
        sideAnim.classList.add('opacity-0');
        sideAnim.classList.remove('opacity-100');
    }

    // Second
    var sideAnim2 = document.getElementById('sideAnim2');

    if (sideAnim2.classList.contains('-translate-x-full')) {
        sideAnim2.classList.add('translate-x-0');
        sideAnim2.classList.remove('-translate-x-full');
    } else {
        sideAnim2.classList.add('-translate-x-full');
        sideAnim2.classList.remove('translate-x-0');
    }

    // Third
    var sideAnim3 = document.getElementById('sideAnim3');

    if (sideAnim3.classList.contains('opacity-0')) {
        sideAnim3.classList.add('opacity-100');
        sideAnim3.classList.remove('opacity-0');
    } else {
        sideAnim3.classList.add('opacity-0');
        sideAnim3.classList.remove('opacity-100');
    }

    // Fourth
    var sideAnim4 = document.getElementById('sideAnim4');

    if (sideAnim4.classList.contains('opacity-0')) {
        sideAnim4.classList.add('opacity-100');
        sideAnim4.classList.remove('opacity-0');
    } else {
        sideAnim4.classList.add('opacity-0');
        sideAnim4.classList.remove('opacity-100');
    }
}

function showToast(title, message, type, timeout = 3000) {
    const toast = document.getElementById('toast');

    document.getElementById('toast-title').innerText = title;
    document.getElementById('toast-text').innerText = message;

    //set the toast type
    document.getElementById('error').classList.add('hidden');
    document.getElementById('confirmed').classList.add('hidden');
    document.getElementById('info').classList.add('hidden');
    document.getElementById('warning').classList.add('hidden');

    document.getElementById(type).classList.remove('hidden');

    //then show the one we want
    toast.classList.remove('translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');
    toast.classList.add('translate-y-0', 'opacity-100', 'sm:translate-x-0', 'ease-out');

    //make sure to cancel the timout if showtoast is called again
    clearTimeout(window.toastTimeout);
    window.toastTimeout = setTimeout(function () {
        hideToast();
    }, timeout);
}

// returns boolean
function signupCheck(username, email, password, passwordConfirm) {
    if (password !== passwordConfirm) {
        passwordConfirm.value = '';
        showToast('Passwords do not match', 'The passwords you entered do not match. Please try again.', 'error')
        return false;
    }

    if (!document.querySelector('#link-checkbox').checked) {
        showToast('Terms and Conditions', 'You must agree to the terms and conditions to create an account.', 'error')
        return false;
    }

    if (username.length < 3) {
        showToast('Username too short', 'Your username must be at least 3 characters long.', 'error')
        return false;
    }

    if (password.length < 8) {
        showToast('Password too short', 'Your password must be at least 8 characters long.', 'error')
        return false;
    }

    if (password.length > 64) {
        showToast('Password too long', 'Your password must be less than 64 characters long.', 'error')
        return false;
    }

    if (email.length > 128) {
        showToast('Email too long', 'Your email must be less than 128 characters long.', 'error')
        return false;
    }

    if (username.length > 16) {
        showToast('Username too long', 'Your username must be less than 16 characters long.', 'error')
        return false;
    }

    if (hasWhiteSpace(username)) {
        showToast('Username contains spaces', 'Your username must not contain any spaces.', 'error')
        return false;
    }

    if (hasWhiteSpace(password)) {
        showToast('Password contains spaces', 'Your password must not contain any spaces.', 'error')
        return false;
    }

    if (hasWhiteSpace(email)) {
        showToast('Email contains spaces', 'Your email must not contain any spaces.', 'error')
        return false;
    }

    if (!validateEmail(email)) {
        showToast('Invalid email', 'The email you entered is invalid. Please try again.', 'error')
        return false;
    }

    if (!hasSpecialCharacter(password)) {
        showToast('Password missing special character', 'Your password must contain at least one special character.', 'error')
        return false;
    }

    if (!hasDigitOrUppercase(password)) {
        showToast('Password missing number', 'Your password must contain at least one number.', 'error')
        return false;
    }

    return true;
}

function hideToast() {
    const toast = document.getElementById('toast');
    toast.classList.remove('translate-y-0', 'opacity-100', 'sm:translate-x-0', 'ease-out');
    toast.classList.add('translate-y-2', 'opacity-0', 'sm:translate-y-0', 'sm:translate-x-2');
}

function hasSpecialCharacter(password) {
    const pattern = /[!@#$%^&*(),.?":{}|<>]/;
    return pattern.test(password);
}

function hasDigitOrUppercase(string) {
    return /[0-9A-Z]/.test(string);
}

function hasWhiteSpace(string) {
    return /\s/g.test(string);
}

function validateEmail(email) {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
}


function toggleFAQ(faqId, clickedButton) {
    const faqContent = document.getElementById(faqId);
    const allFAQs = document.querySelectorAll('.faqContent');
    const svg = clickedButton.querySelector('.faq-arrow');
    const isCurrentlyOpen = faqContent.classList.contains('show');

    // Immediately adjust max-height for the current FAQ for a smoother transition
    if (!isCurrentlyOpen) {
        // Opening: Set max-height to scrollHeight directly for a smooth open animation
        const scrollHeight = faqContent.scrollHeight;
        faqContent.style.maxHeight = scrollHeight + "px"; // Use the content's actual height for transition
        // Need to allow the browser to recognize the starting state
        requestAnimationFrame(() => {
            faqContent.classList.add('show');
        });
    } else {
        // Closing: Transition from current max-height to 0
        faqContent.style.maxHeight = `${faqContent.scrollHeight}px`;
        requestAnimationFrame(() => {
            faqContent.style.maxHeight = '0';
        });
    }

    // Close all other FAQs and reset their arrows, ensuring a smooth transition for them as well
    allFAQs.forEach((content) => {
        if (content !== faqContent) {
            content.classList.remove('show');
            content.previousElementSibling.querySelector('.faq-arrow').classList.remove('rotate-90');
            // Apply a smooth transition to 0 for other content sections
            content.style.maxHeight = `${content.scrollHeight}px`;
            requestAnimationFrame(() => {
                content.style.maxHeight = '0';
            });
        }
    });

    // Toggle arrow rotation for the current FAQ
    if (!isCurrentlyOpen) {
        svg.classList.add('rotate-90');
    } else {
        // Allow for the closing animation to start smoothly before removing the class
        requestAnimationFrame(() => {
            faqContent.classList.remove('show');
            svg.classList.remove('rotate-90');
        });
    }
}