// Init FeedbackOptions
var initFeedBackPanel = $("#initialFeedbackPanel");
var initLeftButton = $("#initButtonLeft");
var initRightButton = $("#initButtonRight");
var submitButton = $("#submitButtonFeedbackForm");

// FeedbackForm 
var form = $("#feedbackForm");

// Form Introduction Texts regards which "init Buttons" are pressed
var introTextPositive = $("#formIntroTextPositive");
var introTextNegative = $("#formIntroTextNegative");
var textArea = $("#feedbackTextArea");
var textAreaCharsRemaining = $("#feedbackTextAreaCharsRemaining");

var feedbackResponse = $("#feedbackResponse");

var sensitiveUserInputErrorMessage = $("#sensitiveUserInputErrorMessage");

$(document).ready(function () {
    var maxCharacters = textArea.attr("maxlength");
    var characterLabel = textAreaCharsRemaining.attr("data-label");

    // initValue
    textAreaCharsRemaining.text(characterLeftToString(0, maxCharacters, characterLabel));
    var regexPattern = /(\d\W*){5,}|(@)/g;
    var isError = false;
    $("textarea").keyup(function () {
        var lengthOfTypedText = $(this).val().length;
        textAreaCharsRemaining.text(characterLeftToString(lengthOfTypedText, maxCharacters, characterLabel));
        var matches = textArea.val().match(regexPattern);

        // Resets Error msg
        if (matches === null && isError) {
            $(this).removeClass("sensitive-user-input-error");
            sensitiveUserInputErrorMessage.hide();
            submitButton.attr('disabled', false);
            isError = false;
        }
        // Is Error
        else if (matches !== null && !isError) {
            $(this).addClass("sensitive-user-input-error");
            sensitiveUserInputErrorMessage.show();
            submitButton.attr('disabled', true);
            isError = true;
        }

    });

    // if site is found 
    initLeftButton.on("click", function () {
        var modelProperty = $(this).attr("data-modelBindName");
        $("#" + modelProperty).val(true);
        showFeedBackForm();
        introTextPositive.show();
        introTextNegative.hide();
    });
    // if site not found
    initRightButton.on("click", function () {
        var modelProperty = $(this).attr("data-modelBindName");
        $("#" + modelProperty).val(false);
        showFeedBackForm();
        introTextPositive.hide();
        introTextNegative.show();
    });

    if (initLeftButton.is(":checked")) {
        initLeftButton.click();
        $("textarea").keyup();
    }
    if (initRightButton.is(":checked")) {
        initRightButton.click();
        $("textarea").keyup();

    }
});

function showFeedBackForm() {
    form.show();
}

function characterLeftToString(charTyped, charMax, charLabel) {
    return charTyped + "/" + charMax + " " + charLabel;
}

function setUrl() {
    var modelUrlProperty = $("[data-name='url']");
    var pageUrl = window.location.pathname;
    modelUrlProperty.val(pageUrl);
}

function setLanguage() {
    var modelLanguageProperty = $("[data-name='language']");
    var pageLanguage = $("html").attr("lang");
    modelLanguageProperty.val(pageLanguage);
}

form.submit(function (e) {
    setUrl();
    setLanguage();
    post();
    e.preventDefault();
});

var post = function() {
    $.ajax({
        type: "POST",
        url: "/api/feedback",
        data: form.serialize(),
        success: function(response) {
            if (response.descriptionContainsSensitiveUserInput) {
                textArea.addClass("sensitive-user-input-error");
                sensitiveUserInputErrorMessage.show();
            } else {
                textArea.removeClass("sensitive-user-input-error");
                ShowConfirmationText();
            }
        },
        error: function(response) {
            ShowConfirmationText();
        }
    });
};

function clearFormValues() {
    initLeftButton.prop('checked', false);
    initRightButton.prop('checked', false);
    textArea.prop('value', '');
}

function ShowConfirmationText() {
    scrollToConfirmationText();
    form.hide();
    initFeedBackPanel.hide();
    clearFormValues();
    feedbackResponse.show();
}

function scrollToConfirmationText() {
    var topOfViewPort = $(window).scrollTop();
    var topOfFeedbackContainer = $("#feedbackContainer").offset().top;
    var scrollPosition = topOfFeedbackContainer - 10;

    if (scrollPosition < topOfViewPort) {
        $([document.documentElement, document.body]).animate({
            scrollTop: scrollPosition
        }, 100);
    }
}