let initSubHeaderOffsetTop = 500;

let parallaxActive = true;

$(document).ready(function () {
    initSubHeaderOffsetTop = $('#profile-sub-header').offset().top;

    $('section[data-type="background"]').each(function () {
        var $bgobj = $(this);
        $bgobj.css('height', parseFloat($('#profile-sub-header').css('top')) - $(window).scrollTop() - 60);
        $(window).scroll(function () {
            if (parallaxActive) {
                let translateY = $('#profile-sub-header').css('transform');
                if (translateY !== 'none') {
                    translateY = matrixToArray(translateY);
                    translateY = parseFloat(translateY[translateY.length - 1]);
                } else {
                    translateY = 0;
                }
                $bgobj.css('height', 500 + translateY - $(window).scrollTop() - 60);
            }
        });
    });
    $('section[data-type="foreground"]').each(function () {
        const $bgobj = $(this);

        $(window).scroll(function () {
            if (parallaxActive) {
                const yPos = -($(window).scrollTop() / $bgobj.data('speed'));
                const coords = '50% ' + yPos + 'px';
                $bgobj.css({backgroundPosition: coords});
                $bgobj.css('transform', 'translate3d(0,' + yPos + 'px, 0)')
            }
        });
    });
});

function matrixToArray(str) {
    return str.split('(')[1].split(')')[0].split(',');
}

$(window).scroll(function () {
    const offsetTop = $(this).scrollTop() + 80;

    const subheader = $('#profile-sub-header');
    let translate = subheader.css('transform');
    let translateY = 0;
    if (translate !== 'none') {
        translate = matrixToArray(translate);
        translateY = parseFloat(translate[translate.length - 1]);
    }

    const logoContainer = $('.profile-picture-container');
    const logo = $('.profile-picture');

    const maxDelta = subheader.offset().top - (logoContainer.width() * .8 - 60) / 2;
    // const maxDelta = (logoContainer.width() * .8) / 2;
    // const delta = offsetTop - logoOffset - translateY;
    const delta = offsetTop - 60;
    let factor = 1 - delta / maxDelta;
    factor = Math.min(Math.max(0, factor), 1);

    const maxWidth = logoContainer.width() * .8;
    const minWidth = 50;
    const width = minWidth + factor * (maxWidth - minWidth);

    const maxBorder = 5;
    const border = factor * maxBorder;

    const maxLeft = 50;
    const minLeft = 100;
    const left = minLeft + factor * (maxLeft - minLeft);

    const minTransformX = -120;
    const maxTransformX = -50;
    const transformX = minTransformX + factor * (maxTransformX - minTransformX);

    const minTransformY = -60;
    const maxTransformY = -50;
    const transformY = minTransformY + factor * (maxTransformY - minTransformY);

    logo.css('width', width + 'px')
        .css('border-width', border + 'px')
        .css('left', left + '%')
        .css('transform', `translate(${transformX}%, ${transformY}%)`);

    $('.avatar-upload-overlay').css('width', width + 'px')
        .css('height', width + 'px')
        .css('left', left + '%')
        .css('transform', `translate(${transformX}%, ${transformY}%)`);

    const scrollTrigger = $('#scroll-trigger').offset().top;

    if (offsetTop > scrollTrigger) {
        parallaxActive = false;
        subheader.addClass('fixedTop').css('top', 60 - translateY + 'px');
        $('#profile-content').css('transform', `translateY(${translateY * -1}px)`)
    } else if (offsetTop + 10 < scrollTrigger) {
        parallaxActive = true;
        subheader.removeClass('fixedTop');
    }
});

const subButton = $('.subscribe-button');
const subbedClass = 'subbed';

subButton.on('click', function (e) {
    sendFollowerRequest();
    e.preventDefault();
});

function toggleSubbed(isSubbed) {
    let count = subButton.attr('data-count');

    if (isSubbed) {
        subButton.removeClass(subbedClass);
        count--;
    } else {
        subButton.addClass(subbedClass);
        count++;
    }

    subButton.attr('data-count', count);
}

function sendFollowerRequest() {
    $.ajax({
        url: "/user/switchFollowing",
        method: "POST",
        success: function (data) {
            switch (data.code) {
                case 0:
                    $('#mustBeLoggedInModal').modal('show');
                    break;
                case 1:
                    $('#cantFollowYourself').modal('show');
                    break;
                case 10:
                    toggleSubbed(true);
                    break;
                case 11:
                    toggleSubbed(false);
                    break;
                default:
                    break;
            }
        },
    });
}

$(document).ready(function () {
    $(".vertical-tab-menu>.list-group>a").click(function (e) {
        e.preventDefault();
        $(this).siblings('a.active').removeClass("active");
        $(this).addClass("active");
        var index = $(this).index();
        $(".vertical-tabs>.vertical-tab-content").removeClass("active");
        $(".vertical-tabs>.vertical-tab-content").eq(index).addClass("active");
    });
});