var markdownEditors = [],
    submitInProgress = false,
    submitProgressClass = 'state-submitting';

$(function(){
    $(document)
        .on('change', 'input[type="checkbox"].toggle-all-options', 'form.form-field-form', function (e) {

            /** Check all other checkboxes if toggle-all checkbox is checked */
            $('form.form-field-form input[type="checkbox"][name="'+$(this).attr('name')+'"]').prop('checked', $(this).prop('checked'));
        })
        .on('change', 'input[type="checkbox"]:not(.toggle-all-options)', 'form.form-field-form', function(e){

            /** Determine whether toggle-all checkbox should be checked or unchecked */
            var toggleAllBox = $('input[type="checkbox"][name="'+$(this).attr('name')+'"].toggle-all-options', 'form.form-field-form');
            if(toggleAllBox.length > 0){
                if($(this).prop('checked')){
                    /** Check toggle-all checkbox if all other checkboxes are checked */
                    var uncheckedBoxes = $('input[type="checkbox"][name="'+$(this).attr('name')+'"]:not(.toggle-all-options):not(:checked)');
                    if(uncheckedBoxes.length < 1){
                        toggleAllBox.prop('checked', true);
                    }
                } else{
                    /** Uncheck toggle-all checkbox if one of the other checkboxes is unchecked */
                    toggleAllBox.prop('checked', false);
                }
            }
    });

    $('.state-check').on('change', 'input[type="radio"], input[type="date"]', function(){
        $('.icon-check', $(this).parents('.state-check')).addClass('state-positive');
    });

    var form = $('form')
    form.on('change', '.actionGetFranchise', function(e){
        var data = {url: window.location.href},
            zipcode = $("[data-reference='zipcode']:valid", form),
            country = $("[data-reference='country']:valid", form);

        if(zipcode) {
            data['zipcode'] = zipcode.val();
            if(data['zipcode'] == '') {
                return;
            }
        }
        if(country) {
            data['country'] = country.val();
        }
        $.post('/ajax/Franchises/GetFranchise', data,
            function(return_data){
                var container = $("[data-reference='house_number']", form);
                container.find('span.state-invalid').remove();

                container = $("[data-reference='zipcode']", form);
                container.find('span.state-invalid').remove();

                container.find('.state-invalid').removeClass('state-invalid');

                if (return_data.valid) {
                    $.each(return_data.addressdata, function(key, value) {
                        field = $("[data-reference='"+key+"']", form);
                        if(field) {
                            field.val(value);
                        }
                    });
                }
            }, "json"
        );
    });

    /** Init markdown editors */
    rebuildMarkdownEditors();
});

/**
 * Rebuild markdown editors
 * Solves issue with markdown editor rendering when container is not displayed on document ready
 */
function rebuildMarkdownEditors()
{
    destroyMarkdownEditors();

    $('textarea.markdown-editor').each(function(){
        var maxCharacters = 0,
            characterClassName = 'characters-label',
            overLimitClass = 'оverlimit',
            statusBarOptions = [];

        if($(this).attr('maxlength')){
            // Set up remaining character counter
            maxCharacters = parseInt($(this).attr('maxlength'));
            var characterCount = $(this).val().length,
                remainingCharacters = maxCharacters - characterCount;

            statusBarOptions = [{
                className: characterClassName,
                defaultValue: (el) => {
                    el.innerHTML = remainingCharacters+'/'+maxCharacters;
                    if(remainingCharacters < 4){
                        $(el).addClass(overLimitClass);
                    }
                }
            }];
        }

        var markdownId = $(this).attr('id'),
            field = $('textarea#'+markdownId);
            easyMDE = new EasyMDE({
                element: field.get()[0],
                status: statusBarOptions, 
                forceSync: true,
                initialValue: field.val(),
                onToggleFullScreen: toggleEditorFullscreen,
                toolbar: ["bold", "italic", 'strikethrough', "|", "quote", 'unordered-list', 'ordered-list', "|", 'undo', 'redo',
                    {
                        name: "select_variable",
                        title: "others buttons",
                        label: "Variabelen",
                        children: [
                            {
                                name: "firstname",
                                action: function(editor){
                                    addMarkdownVariable(editor, 'kandidaat_voornaam');
                                },
                                className: "trigger-variable-firstname",
                                title: "Voornaam",
                            },
                            {
                                name: "functiontitle",
                                action: function(editor){
                                    addMarkdownVariable(editor, 'functietitel');
                                },
                                className: "trigger-variable-functiontitle",
                                title: "Functietitel",
                            },
                            {
                                name: "company_name",
                                action: function(editor){
                                    addMarkdownVariable(editor, 'bedrijfsnaam');
                                },
                                className: "trigger-variable-company_name",
                                title: "Bedrijfsnaam",
                            },
                            {
                                name: "contact_person",
                                action: function(editor){
                                    addMarkdownVariable(editor, 'contactpersoon');
                                },
                                className: "trigger-variable-company_name",
                                title: "Contactpersoon",
                            }
                        ]
                    },
                ],
                showIcons: ['strikethrough'],
                spellChecker: false,
                nativeSpellcheck: true,
                inputStyle: 'contenteditable'
            });
            easyMDE.codemirror.on('keyup', function (e) {
                var textareaCodemirror = $(e.getTextArea());

                // Display remaining characters count
                if(maxCharacters){
                    var characterCount = textareaCodemirror.val().length,
                        remainingCharacters = maxCharacters - characterCount,
                        characterCounter = textareaCodemirror.parent().find('.editor-statusbar .'+characterClassName);
                        
                    if(characterCounter.length > 0){
                        characterCounter.html(remainingCharacters+'/'+maxCharacters);
                        if(remainingCharacters < 4){
                            characterCounter.addClass(overLimitClass);
                        } else{
                            characterCounter.removeClass(overLimitClass);
                        }
                    }
                }

                $('.email-validation', textareaCodemirror.parent()).removeClass('state-show');
                if((/\b(\w)+\@(\w)+\.(\w)+\b/g.test(textareaCodemirror.val()))) {
                    $('.email-validation', textareaCodemirror.parent()).addClass('state-show');
                    return true;
                }
            });

            if(maxCharacters){
                easyMDE.codemirror.on('beforeChange', function (cm, change) {
                    // If amount of characters exceeds max, prevent update
                    if (change.update) {
                        var str = change.text.join("\n")
                        var delta = str.length - (cm.indexFromPos(change.to) - cm.indexFromPos(change.from))
                        if (delta <= 0) { return true }
    
                        delta = cm.getValue().length + delta - maxCharacters
                        if (delta > 0) {
                            str = str.substr(0, str.length - delta)
                            change.update(change.from, change.to, str.split("\n"))
                        }
                    }
                    return true
                });    
            }

            easyMDE.codemirror.on('change', function (e) {
                $(e.getTextArea()).change();
            });
            easyMDE.codemirror.on('blur', function (e) {
                $(e.getTextArea()).blur();
                // if(!data || data.length === 0) {
                //     var data = [];
                // }
                // data[field[0].name] = field.val();
                // updatePreview(data);
            });
            $('.select_variable > i', field.parent()).text('Variabelen');
            $('.select_variable .easymde-dropdown-content button', field.parent()).each(function(k,v){
                $('i', v).text($(v).attr('title'));
            });

        markdownEditors.push(easyMDE);
    });
}

function addMarkdownVariable(editor, variable) {
    var cm = editor.codemirror;

    var startPoint = {};
    Object.assign(startPoint, cm.getCursor('start'));
    text = cm.getSelection();
    cm.replaceSelection('{{'+variable+'}}');

    cm.focus();
}
/**
 * Convert the markdown editors to regular textarea
 */
function destroyMarkdownEditors()
{
    $.each(markdownEditors, function(key, markdownEditor) {
        markdownEditor.toTextArea();
    });
    markdownEditors = [];
}

/**
 * @param {boolean} open
 */
function toggleEditorFullscreen(open)
{
    if (typeof open !== 'undefined') {
        if(open){
            $('body').addClass('state-header-hidden');
        } else{
            $('body').removeClass('state-header-hidden');
        }
    }
}

$(document).on("click", "form.form-field-form #submit2", function(e){ // secondary submit option
    var data = {url: window.location.href},
        form = $(this).parents('form'),
        submitButton = $(this);

    if(!submitInProgress){
        $(form).append($('<input>').attr('type', 'hidden').attr('name', 'submit2').attr('value', 'true'));

        if(form.hasClass('recaptcha_required')) {
            loadCaptchaJs();
            grecaptcha.ready(function() {
                grecaptcha.execute(jsdata.default.recaptcha_key, {action: 'submit'}).then(function(token) {
                    data.captcha_token = token;
                    postCustomForm(form, submitInProgress, submitButton, data);
                });
            });
        }
        else {
            postCustomForm(form, submitInProgress, submitButton, data);
        }
    }
});

$(document).on("submit", "form.form-field-form", function(e){
    e.preventDefault();

    if(!submitInProgress){
        var data = {url: window.location.href},
            form = $(this),
            submitButton = $('button[type="submit"]', form);

        if(form.hasClass('recaptcha_required')) {
            loadCaptchaJs();
            grecaptcha.ready(function() {
                grecaptcha.execute(jsdata.default.recaptcha_key, {action: 'submit'}).then(function(token) {
                    data.captcha_token = token;
                    postCustomForm(form, submitInProgress, submitButton, data);
                });
            });
        }
        else {
            postCustomForm(form, submitInProgress, submitButton, data);
        }
    }
});

$(document).on("change", "form.form-field-form input, form.form-field-form textarea, form.form-field-form select", function(e){
    var buttonToShow = $('.btn-show-on-change');
    if(buttonToShow.length > 0 && buttonToShow.hasClass('state-hidden')){
        buttonToShow.removeClass('state-hidden');
    }
});

var postCustomForm = function(form, submitInProgress, submitButton, data){
    submitInProgress = true;
    submitButton.addClass(submitProgressClass);
    var isStepsForm = false;

    if(form.hasClass('steps-form')) {
        isStepsForm = true;
    }

    $(form).find('input[type=text], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=hidden], textarea, select, input[type=radio]:checked').each(function(){
        data[$(this).attr('name')] = $(this).val();
    });
    $(form).find('input[type=checkbox]:checked, .type.state-selected input').each(function(){
        if(!data[$(this).attr('name')]){
            data[$(this).attr('name')] = [];
        }
        data[$(this).attr('name')][data[$(this).attr('name')].length] = $(this).val();
    });

    $.ajax({
        async : true,
        data : data,
        dataType : 'json',
        url : form.attr('action'),
        type : form.attr('method'),
        statusCode: {
            403: function() {
                alert( "Niet toegestaan" );
            }
        }
    }).done(function(return_data){
        if (return_data.valid) {

            if (return_data.hasOwnProperty('ga4')) {
                pushGa4Events(return_data.ga4);
            }

            if (return_data.hasOwnProperty('event')) {
                pushDataLayerEvent(return_data.event.category, return_data.event.action, return_data.event.label);
            }

            if (return_data.hasOwnProperty('return_text')) {
                form.replaceWith(return_data.return_text);
            }
            else if (return_data.hasOwnProperty('message')) {
                form.replaceWith(return_data.message);
            }
            else if (return_data.hasOwnProperty('forward_url')) {
                window.location = return_data.forward_url;
            } else{
                window.location = window.location.href;
            }
        } else{
            form.find('span.errorMessage').remove();
            form.find('.error').removeClass('error');

            $.each(return_data.fields, function(key, value) {
                var field = $('input[name="' + key + '"], button[name="' + key + '"], textarea[name="' + key + '"], select[name="' + key + '"], #'+key+'.upload-holder ', form),
                    error = value;

                if(key === 'captcha_token'){
                    error = 'Het formulier kan niet verwerkt worden omdat deze niet door onze beveiligingscheck (reCAPTCHA) komt. Mogelijke oorzaak hiervan is dat je browser bepaalde cookies of domeinen blokkeert. <br/>Mocht je dit issue op meerdere apparaten tegenkomen, neem dan contact met ons op.'
                    $('.btn.submit').parent().prepend($('<span>').addClass('errorMessage form-row-validation state-show').html(error+'<br/>'));
                } else{
                    field.parent().append($('<span>').addClass('errorMessage form-row-validation state-show').html(error+'<br/>'));
                    field.addClass('error');
                    
                    if (key == 'submit') {
                        alertMessage(value)
                    }
                }

                if(isStepsForm) {
                    var button_step = $('button[data-step="'+field.parents('.step').data('step')+'"]');
                    if(button_step.length !== 0) {
                        openSelectedStep(button_step);
                        return false;
                    }
                }
            });
        }
    }).always(function(){
        submitInProgress = false;
        submitButton.removeClass(submitProgressClass);
    });
}

$(document).on("click", "button[data-ajax]", function(e){
    var data = {url: window.location.href},
        ajaxButton = $(this),
        doRequest = true;

    if(ajaxButton.data('confirm-delete')){
        doRequest = confirmDelete();
    }

    if(doRequest){
        submitInProgress = true;
        ajaxButton.addClass(submitProgressClass);

        $.ajax({
            async : true,
            data : data,
            dataType : 'json',
            url : ajaxButton.data('ajax'),
            type : 'post',
            statusCode: {
                403: function() {
                    alert( "Niet toegestaan" );
                }
            }
        }).done(function(return_data){
            if (return_data.valid) {
                if(return_data.hasOwnProperty('message')){
                    alertMessage(return_data.message);
                }
                if (return_data.hasOwnProperty('forward_url')) {
                    window.location = return_data.forward_url;
                }
            } else if(return_data.hasOwnProperty('error')){
                alertMessage(return_data.error);
            }
        }).always(function(){
            submitInProgress = false;
            ajaxButton.removeClass(submitProgressClass);
        });
    }
});

var triggerMaxSelectItems = function(formOptions, maxItems){
    var amount = 0;
    $('input:checked', $(formOptions)).each(function(k, v){
        amount++;
        if(amount >= maxItems) {
            $('input:not(:checked)', $(formOptions)).attr('disabled', true);
        }
        else {
            $('input', $(formOptions)).attr('disabled', false);
        }
    });
};
$('.trigger-max-select-items').each(function(k, formOptions){
    triggerMaxSelectItems(formOptions, $(formOptions).attr('data-max-select-items'));
    $(formOptions).on('change', 'input', function(k,v){
        triggerMaxSelectItems(formOptions, $(formOptions).attr('data-max-select-items'));
    });
});