const feedbackForm = document.getElementById("feedback-form");
$(document).ready(function () {
    if (feedbackForm)
        InitializingFeedbackForm();
})

function InitializingFeedbackForm() {
    // Pre-script
    $("button.sf-SubmitButton").prop("disabled", true);
    let isAnonymous = $("input[name='IsAnonymous']")[0];
    if ($(isAnonymous).prop("checked") == true) {
        $(".allow-anonymous input.form-control").val('');
        $(".allow-anonymous input.form-control").prop("disabled", true);
        $(isAnonymous).closest("fieldset.section-wrap").find(".text-danger").html('');
    }

    // Main
    AddFieldSet();
    AddAnonymousSubmission();
    AddLimitFileUpload();
    ModifyPlaceholder();
    WidenTextarea();
    CheckSubmitCondition();

    // Post-script
    const observer = new MutationObserver(HighlightInvalidInputField);
    observer.observe($('#feedback-form')[0], { attributes: true, attributeFilter: ['style'], subtree: true });
}

function AddFieldSet() {
    let openSections = feedbackForm.querySelectorAll(".fieldset-open");
    if (!openSections)
        return;

    for (var i = 0; i < openSections.length; i++) {
        let header = $(openSections[i]).text().trim();
        let leg = document.createElement('strong')
        leg.innerText = header;
        $(openSections[i]).after(leg);
        $(leg).wrapAll('<legend>');
        let contents = $(openSections[i]).nextUntil('.fieldset-close');
        $(contents).wrapAll('<fieldset class="section-wrap">');
    }

    $('.fieldset-open').remove();
    $('.fieldset-close').remove();
}

function AddLimitFileUpload() {
    $(".sf-FileField.form-group").on("click", function () {
        const fileInputs = $('input.sf-FileField-input');
        if (fileInputs.length > 2) {
            $('a[data-sf-role="add-input"]').hide();
        } else {
            $('a[data-sf-role="add-input"]').show();
        }
    });
}

function ModifyPlaceholder() {
    $(".feedback-form textarea.form-control").each(function () {
        var text = $(this).prop("placeholder");
        text = text.replace(/<br\s*\/?>/gi, "\n");
        $(this).prop("placeholder", text);
    });
}

function WidenTextarea() {
    $("textarea.form-control").attr("rows", "7");
}

function AddAnonymousSubmission() {
    $("input[name='IsAnonymous']").change(function () {
        if ($(this).prop("checked") == true) {
            $(".allow-anonymous input.form-control").val('');
            $(".allow-anonymous input.form-control").prop("disabled", true);
            $(".allow-anonymous input.form-control").css("border-color", "black");
            $(this).closest("fieldset.section-wrap").find(".text-danger").html('');
        }
        else {
            $(".allow-anonymous input.form-control").prop("disabled", false);
        }
    });
}

function CheckSubmitCondition() {
    $("#contactUsTermAndPolicy").on("change", function () {
        if ($(this).prop("checked") == true) {
            $("button.sf-SubmitButton").prop("disabled", false);
        } else {
            $("button.sf-SubmitButton").prop("disabled", true);
        }
    });
}

function HighlightInvalidInputField() {

    $(".text-danger[data-sf-role='error-message']").each(function () {
        let field = $(this).prev("input, select, textarea");
        if (field.length) {
            if ($(this).html() != '' && $(this).css("display") == 'block') {
                $(field).css("border-color", "red");
            } else {
                $(field).css("border-color", "black");
            }
        }


    });

    $("div[data-sf-role='single-file-input']").each(function () {

        let errors = $(this).find('div:not(.error-summary)').filter(function () {
            return $(this).css('display') === 'block';
        });

        if (errors.length && errors.length > 1) {
            $(errors[0]).hide();
        }
    });
}