$( document ).ready(function() {

    $(document).on('click', '#af2_save_post', _ => af2_save_builder());

    $(document).on('click', '.af2_builder_deletable_object span.af2_delete_object', function(ev) { 
        ev.stopPropagation();
        af2_delete_deleteable_object(this); 
    });
});

const af2_load_object_data = () => {
    af2_builder_object.sidebar_elements.forEach(sidebar_element => {
        sidebar_element.fields.forEach(field => af2_load_field_html_data(sidebar_element, field));
    });
}

const af2_load_field_html_data = (sidebar_element, field) => {
    
    let saveObjectValues = null;
    if(sidebar_element.editContentArray) saveObjectValues = af2_builder_object.af2_save_object[field.details.saveObjectId];
    else saveObjectValues = [af2_builder_object.af2_save_object[field.details.saveObjectId]];

    if(saveObjectValues == null || !Array.isArray(saveObjectValues)) return;

    saveObjectValues.forEach((saveObjectValue, i) => {

        if(!field.details.html) return;

        let selector = null;
        let prefix = '#';
        if(field.details.htmlClass) prefix = '.'
        const selstr = prefix+field.details.htmlId+'[data-editcontentarrayid="'+i+'"]';
        if(sidebar_element.editContentArray) selector = $(selstr).not('.af2_dragging '+selstr);
        else selector = $(prefix+field.details.htmlId);

        if(selector == null || selector.length <= 0) return;

        let soValue = saveObjectValue;
        if(field.details.saveObjectIdField != null) soValue = saveObjectValue[field.details.saveObjectIdField];

        if(soValue == 'true') soValue = true;
        if(soValue == 'false') soValue = false;

        switch(field.type) {
            case 'text': {
                let value = field.details.empty_value;
                if(soValue != null && soValue.trim() != '') 
                {
                    value = soValue;
                    if(field.details.htmlPreset != null) value = field.details.htmlPreset+value;
                }
                if(field.details.htmlAttr != null) selector.attr(field.details.htmlAttr, value);
                else selector.html(value);
                break;
            }
            case 'textarea_': {
                //fallthrough
            }
            case 'textarea': {
                let value = field.details.empty_value;
                if(soValue != null && soValue.trim() != '') 
                {
                    value = soValue;
                    if(field.details.htmlPreset != null) value = field.details.htmlPreset+value;
                }
                if(field.details.htmlAttr != null) selector.attr(field.details.htmlAttr, value);
                else selector.html(value);
                break;
            }
            case 'checkbox': {
                // Do Nothing;
                break;
            }
            case 'radio': {
                // Do Nothing;
                break;
            }
            case 'select': {
                // Do Nothing;
                break;
            }
            case 'icon_image': {
                const value = soValue;
                selector.html('');
                if(field.details.empty_value != null) selector.html(field.details.empty_value);

                if(value == null || value.trim() == '') break;

                if(value.substr(0, 4) == 'http') {
                    if(field.details.icon_url == true) selector.html(value);
                    else selector.html('<img class="af2_icon_image_img" src="'+value+'">');
                } else {
                    selector.html('<i class="'+value+' af2_icon_image_icon"></i>')
                }
                break;
            }
            case 'color_picker': {
                // Do Nothing;
                break;
            }
            case 'restriction': {
                // Do Nothing;
                break;
            }
            default: {
                break;
            }
        }


        if(field.details.throwEvent != null) {
            let event = jQuery.Event(field.details.throwEvent);
            event.value = soValue;
            $(selector).trigger(event);
        }

    });
}

const af2_load_input_html_data = () => {
    $('.af2_edit_content_input').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        const saveObjectArrayId = $(el).data('saveobjectarrayid');
        const saveObjectFieldId = $(el).data('saveobjectfieldid');

        let val = af2_builder_object.af2_save_object[saveObjectId];

        if(saveObjectArrayId != null) {
            if(saveObjectFieldId != null) {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId][saveObjectFieldId];
            }
            else {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId];
            }
        }
        else {
            if(saveObjectFieldId != null) {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectFieldId];
            }
        }

        $(el).attr('value', val);
    });

    $('.af2_edit_content_textarea').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        const val = af2_builder_object.af2_save_object[saveObjectId];
    
        $(el).val(val);
    });

    $('.af2_edit_content_checkbox_array_list').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        let values = af2_builder_object.af2_save_object[saveObjectId];

        if(values == null) {
            values = [];
            af2_builder_object.af2_save_object[saveObjectId] = [];
        }

        const saveObjectIdValue = $(el).data('saveobjectidvalue');

        const newVal = values.includes(saveObjectIdValue);

        $(el).prop('checked', newVal);
    });
    
    $('.af2_edit_content_checkbox').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        let val = af2_builder_object.af2_save_object[saveObjectId];
        if(val == 'true') val = true;
        if(val == 'false') val = false;
    
        if($(el).data('saveobjectidvalue') != null) {
            const newVal = val == $(el).data('saveobjectidvalue') ? true : false;
            $(el).prop('checked', newVal);
        }
        else $(el).prop('checked', val);


        const margin = $(el).data('nomarginid');
        const toggle = $(el).data('togglecontentid');

        if(val) $('#'+margin).removeClass('no_margin');
        if(!val) $('#'+margin).addClass('no_margin');

        if(val) $('#'+toggle).removeClass('af2_hide');
        if(!val) $('#'+toggle).addClass('af2_hide');
    });

    $('.af2_edit_content_radio').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        let val = af2_builder_object.af2_save_object[saveObjectId];
        let saveObjectIdValue = $(el).attr('value');
        const toggle = $(el).data('togglecontentid');
        const toggleGroup = $(el).data('togglecontentgroup');

        if(val == saveObjectIdValue) {
            $(el).prop('checked', true);
            $('.toggle_content_group[data-togglecontentgroup="'+toggleGroup+'"]').addClass('af2_hide');
            $('#'+toggle).removeClass('af2_hide'); 
        }
    });
    
    $('.af2_edit_content_select').each((i, el) => {
        const saveObjectId = $(el).data('saveobjectid');
        const saveObjectArrayId = $(el).data('saveobjectarrayid');
        const saveObjectFieldId = $(el).data('saveobjectfieldid');

        let val = null;

        if(saveObjectArrayId != null) {
            if(saveObjectFieldId != null) {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId][saveObjectFieldId];
            }
            else {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId];
            }
        }
        else {
            if(saveObjectFieldId != null) {
                val = af2_builder_object.af2_save_object[saveObjectId][saveObjectFieldId];
            }
            else {
                val = af2_builder_object.af2_save_object[saveObjectId];
            }
        }



        $(el).val(val).change();
    });
}

// Free Elements //
$(document).on('input', '.af2_edit_content_input', function() {
    const val = $(this).val();
    const saveObjectId = $(this).data('saveobjectid');
    const saveObjectArrayId = $(this).data('saveobjectarrayid');
    const saveObjectFieldId = $(this).data('saveobjectfieldid');
    
    if(saveObjectArrayId != null) {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId] = val;
        }
    }
    else {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId] = val;
        }
    }
});

$(document).on('input', '.af2_edit_content_textarea', function() {
    const val = $(this).val();
    const saveObjectId = $(this).data('saveobjectid');
    const saveObjectArrayId = $(this).data('saveobjectarrayid');
    const saveObjectFieldId = $(this).data('saveobjectfieldid');
    
    if(saveObjectArrayId != null) {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId] = val;
        }
    }
    else {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId] = val;
        }
    }
});

$(document).on('click', '.af2_edit_content_radio', function() { 
    const radioName = $(this).attr('name');
    const val = $('input[name="'+radioName+'"]:checked').val();
    const saveObjectId = $(this).data('saveobjectid');

    af2_builder_object.af2_save_object[saveObjectId] = val;

    const toggle = $(this).data('togglecontentid');
    const toggleGroup = $(this).data('togglecontentgroup');

    $('.toggle_content_group[data-togglecontentgroup="'+toggleGroup+'"]').addClass('af2_hide');
    $('#'+toggle).removeClass('af2_hide');
});

$(document).on('change', '.af2_edit_content_select', function() {
    const val = $(this).val();
    const saveObjectId = $(this).data('saveobjectid');
    const saveObjectArrayId = $(this).data('saveobjectarrayid');
    const saveObjectFieldId = $(this).data('saveobjectfieldid');
    
    if(saveObjectArrayId != null) {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectArrayId] = val;
        }
    }
    else {
        if(saveObjectFieldId != null) {
            af2_builder_object.af2_save_object[saveObjectId][saveObjectFieldId] = val;
        }
        else {
            af2_builder_object.af2_save_object[saveObjectId] = val;
        }
    }
});

$(document).on('click', '.af2_edit_content_checkbox_array_list', function() {
    let val = $(this).is(":checked") ? true : false;
    const saveObjectId = $(this).data('saveobjectid');
    const saveObjectIdValue = $(this).data('saveobjectidvalue');

    af2_builder_object.af2_save_object[saveObjectId] = Array.isArray(af2_builder_object.af2_save_object[saveObjectId]) ? af2_builder_object.af2_save_object[saveObjectId] : [];
    
    const index = af2_builder_object.af2_save_object[saveObjectId].indexOf(saveObjectIdValue);
    if(val) {
        if(index == -1) {
            af2_builder_object.af2_save_object[saveObjectId].push(saveObjectIdValue)
        }
    }
    if(!val) {
        if(index > -1) {
            af2_builder_object.af2_save_object[saveObjectId].splice(index, 1);
        }
    }
});

$(document).on('click', '.af2_edit_content_checkbox', function() {
    let val = $(this).is(":checked") ? true : false;
    const saveObjectId = $(this).data('saveobjectid');

    if($(this).data('saveobjectidvalue') != null) {
        if(val) af2_builder_object.af2_save_object[saveObjectId] = $(this).data('saveobjectidvalue');
    }
    else af2_builder_object.af2_save_object[saveObjectId] = val;
    

    const margin = $(this).data('nomarginid');
    const toggle = $(this).data('togglecontentid');

    if(val) $('#'+margin).removeClass('no_margin');
    if(!val) $('#'+margin).addClass('no_margin');

    if(val) $('#'+toggle).removeClass('af2_hide');
    if(!val) $('#'+toggle).addClass('af2_hide');

    // different active but always one active
    if($(this).data('radioclickgroup') != null) {
        const own = $(this).is(":checked") ? true : false;
        const others = $('input[type="checkbox"][data-radioclickgroup="'+$(this).data('radioclickgroup')+'"]').not(this).is(':checked') ? true : false;
        if(own == others) $('input[type="checkbox"][data-radioclickgroup="'+$(this).data('radioclickgroup')+'"]').not(this).trigger('click');
    }
    // different active but nobody has to be active
    if($(this).data('radioclickgroupa') != null) {
        const own = $(this).is(":checked") ? true : false;
        const others = $('input[type="checkbox"][data-radioclickgroupa="'+$(this).data('radioclickgroupa')+'"]').not(this).is(':checked') ? true : false;
        if(own && others) $('input[type="checkbox"][data-radioclickgroupa="'+$(this).data('radioclickgroupa')+'"]').not(this).trigger('click');
    }
});


const af2_drag_array_draggable_object = (callbackInsertData, handlerElement) => {
    let insertData = null;
        
    const dragContentId = $(handlerElement).data('saveobjectid');
    const dragContentArrayId = $(handlerElement).data('editcontentarrayid');
    const dragTriggerId = $(handlerElement).data('deletetriggerid');

    if(!$(handlerElement).hasClass('af2_no_delete')) insertData = af2_builder_object.af2_save_object[dragContentId].splice(dragContentArrayId, 1)[0];
    callbackInsertData(insertData);

    let event = jQuery.Event('af2_draggin_dragable_object');
    event.handlerElement = handlerElement;
    $('#'+dragTriggerId).trigger(event);
}

const af2_active_dragging = (handlerElement) => {
    const dragTriggerId = $(handlerElement).data('deletetriggerid');
    
    let event = jQuery.Event('af2_active_draggin_dragable_object');
    event.handlerElement = handlerElement;
    $('#'+dragTriggerId).trigger(event);
}

const af2_drag_array_add_draggable_object = (handlerElement) => {
    let event = jQuery.Event('af2_draggin_add_dragable_object');
    event.handlerElement = handlerElement;
    $('.af2_add_array_draggable_restrict').trigger(event);
}

const af2_drop_array_draggable_object = (insertData, position, handlerElement) => {
    const dragContentId = $(handlerElement).data('saveobjectid');
    const dragTriggerId = $(handlerElement).data('deletetriggerid');

    if(insertData != null) af2_builder_object.af2_save_object[dragContentId].splice(position, 0, insertData);
    let event = jQuery.Event('af2_dropped_dragable_object');
    event.addElement = handlerElement;
    event.position = position;
    $('#'+dragTriggerId).trigger(event);
}

const af2_create_array_dropzones_in = (container, elements, bonusClass) => {
    // Append last 
    container.prepend(af2_create_array_dropzone_html(0, bonusClass));

    elements.each((i, el) => {
        $(el).after(af2_create_array_dropzone_html(i+1, bonusClass));
    });
}

const af2_create_array_dropzone_html = (arrayid, bonusClass) => {
    let content = '';
    content += '<div class="af2_array_dropzone_in '+bonusClass+'" data-arrayid="'+arrayid+'">';
    content += '</div>';
    return content;
}

const af2_dropped_line = (dragElement, dropElement, x1, x2, y1, y2, eventSelector) => {
    let event = jQuery.Event('af2_dropped_line');
    event.dragElement = dragElement;
    event.dropElement = dropElement;
    event.x1 = x1;
    event.y1 = y1;
    event.x2 = x2;
    event.y2 = y2;
    $(eventSelector).trigger(event);
};

const af2_delete_deleteable_object = (dom_element) => {
    const handlerElement = $(dom_element).closest('.af2_builder_deletable_object');

    const deleteContentId = $(handlerElement).data('saveobjectid');
    const deleteContentArrayId = $(handlerElement).data('editcontentarrayid');
    const deleteTriggerId = $(handlerElement).data('deletetriggerid');

    if(deleteContentArrayId == null && !handlerElement.hasClass('af2_no_delete')) return;
    if(!handlerElement.hasClass('af2_no_delete')) af2_builder_object.af2_save_object[deleteContentId].splice([deleteContentArrayId], 1);

    let event = jQuery.Event('af2_deleted_deleteable_object');
    event.deleteContentArrayId = deleteContentArrayId;
    event.element = handlerElement;
    $('#'+deleteTriggerId).trigger(event);
}

const af2_save_builder = (callback, show_modal_messages) => {

    let data = new Object();
    data.post_id = af2_builder_object.post_id;
    data.content = af2_builder_object.af2_save_object;
    data.page = af2_builder_object.page;
    data = JSON.stringify(data);

    $('.af2_error_object').removeClass('af2_error_object');

    af2_create_toast('af2_toast_wrapper', af2_builder_object.strings.speichern, 'af2_info', false);
    $.ajax({
        url: af2_builder_object.ajax_url,
        type: "POST",
        data: {
            'action' : 'af2_save_post',
            'json' : data
        },
        success: (msg) => {
            if(callback!= null) {
                if(show_modal_messages) af2_clear_toast('af2_toast_wrapper', af2_save_modal_messages, msg);
                else af2_clear_toast('af2_toast_wrapper');
                callback();
            }
            else af2_clear_toast('af2_toast_wrapper', af2_save_modal_messages, msg);
        },
        error: (jqXHR, error, errorThrown) => {
            // console.log("error", jqXHR, error, errorThrown);
            af2_clear_toast('af2_toast_wrapper', _ => {
                $('#af2_save_modal .af2_modal_content').html('');
                af2_create_toast('af2_toast_wrapper', af2_builder_object.strings.support, 'af2_error');
            });
        }
    });
};

const af2_save_modal_messages = (messages) => {
    if(messages != null && messages != '') messages = JSON.parse(messages);
    
    let errorCollection = [];

    $('#af2_save_modal .af2_modal_content').html('');

    messages.forEach(el => {

        if(el.type == 'af2_error') {
            errorCollection.push(el);
            $('#af2_save_modal .af2_modal_content').append('<p>'+el.label+'</p>');
            if(el.error_object != null) $(el.error_object).addClass('af2_error_object');
        }

        else af2_create_toast('af2_toast_wrapper', el.label, el.type);
    });


    if(errorCollection.length > 0) af2_create_toast('af2_toast_wrapper', af2_builder_object.strings.error, 'af2_error', true, af2_open_modal, '#af2_save_modal');
}
