$(document).ready(function() {

    function getUrlGetParameter(val) {
        var result = "Not found",
            tmp = [];
        location.search
        .substr(1)
            .split("&")
            .forEach(function (item) {
            tmp = item.split("=");
            if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
        });
        return result;
    }

    function addSpinner(element) {
        element.append("<div class=\"spinner\"><div class=\"bounce1\"></div><div class=\"bounce2\"></div><div class=\"bounce3\"></div></div>");
    }

    function removeSpinner(element) {
        element.children(".spinner").remove();
    }

    function loadBox(element, callback) {

        $(document).on("click", element, function(e) {

            e.preventDefault();

            $.get($(this).attr('href'), function(r) {

                try {
                    editBox = $.parseJSON(r);
                    var optionsContainer = document.createElement('div');

                    $.each(editBox['options'], function(i) {
                        switch(this.type) {
                            case 'text':
                                $(optionsContainer).append(this.name + "<input id=\"editbox-input-" + this.name + "\" type=\"text\" value=\"" + this.value + "\" class=\"editbox-input\" /><br><br>");
                                break;
                            case 'select':
                                selectHtml = "<select id=\"editbox-input-" + this.name + "\" class=\"editbox-input\">";
                                this['values'].forEach(function(item) { // TODO: jQuery-each?
                                    if(editBox['options'][0]['value'] == item) {
                                        selectHtml += "<option selected value=\"" + item + "\">" + item + "</option>"
                                    } else {
                                        selectHtml += "<option value=\"" + item + "\">" + item + "</option>"
                                    }
                                });
                                selectHtml += "</select>";
                                $(optionsContainer).append(this.name +  selectHtml + "<br><br>");
                                break;
                            default:
                                break;
                        }
                    });

                    $.fancybox({
                        maxWidth	: 800,
                        maxHeight	: 600,
                        fitToView	: true,
                        width		: '70%',
                        height		: '70%',
                        autoSize	: false,
                        title       : "<h3>" + editBox['title'] + "</h3><hr>",
                        content     : optionsContainer.innerHTML,
                        helpers     : {
                            title: {
                                type    : 'inside',
                                position: 'top'
                            }
                        },
                        afterShow   : callback
                    });
                } catch(e) {
                    console.log(e); // DBG
                    var n = noty({
                        layout  : 'topCenter',
                        text    : 'Irgendwas ist schief gelaufen.<br>Bitte probieren Sie es später noch einmal.',
                        type    : 'error',
                        timeout : 5000
                        });
                }
            });

        });
    }

    function getMailboxStatus() {
        $("#settings-mailboxes tr").each(function(item) {
            var thisTr = this;

            if(this.attributes.length > 0) {
                addSpinner($(this).children("td:first"));
                $.getJSON("ajax.php?action=getMailboxStatus&mailboxId=" + $(this).attr("data-mailbox-id"), function(r) {
                    if(r['connected'] == true) {
                        removeSpinner($(thisTr).children("td:first"));
                        $(thisTr).children("td:first").append("<i class=\"fa fa-check-circle\"></i>");
                    } else {
                        removeSpinner($(thisTr).children("td:first"));
                        $(thisTr).children("td:first").append("<i class=\"fa fa-exclamation-circle\"></i>");
                    }
                });
            }
        });
    }

    function newDocumentListener() {
        $(document).on("change", ".fancybox-inner select", function(e) {
            reloadDraftVars();
        });

        $(document).on("click", "#save-new-document", function(e) {
            e.preventDefault();

            data = {
                draft: $("#editbox-input-vorlage").val(),
                filename: $("#editbox-input-filename").val(),
                labelId: getUrlGetParameter("labelId"),
                draftVars: {}
            }

            $(".editbox-draft-vars").each(function(i) {
                data['draftVars'][$(this).attr("id").replace("editbox-draft-vars-", "")] = $(this).val();
            });

            $.getJSON("ajax.php?action=saveNewDocument", data, function(r) {
                console.log(r);
            });
        });
    }

    function reloadDraftVars() {
        $.getJSON("ajax.php?action=getDraftVars&draft=" + $(".fancybox-inner select").val(), function(r) {
            draftVarsContainer = $("#draft-vars");

            if(draftVarsContainer.length > 0) {
                console.log(draftVarsContainer);
                draftVarsContainer.remove();
            }

            $(".fancybox-inner").append("<div id=\"draft-vars\"></div>")

            r.forEach(function(item) {
                //$(".fancybox-inner #draft-vars").append(item + "<input id=\"editbox-draft-vars-" + item + "\" class=\"editbox-draft-vars\" type=\"text\" /><br><br>");

                $(".fancybox-inner #draft-vars").append(item + "<textarea id=\"editbox-draft-vars-" + item + "\" class=\"editbox-draft-vars\"></textarea><br><br><br>");

            })

            $(".fancybox-inner #draft-vars").append("<a href=\"#\"type=\"button\" id=\"save-new-document\" class=\"btn btn-success\">Dokument speichern</a>");

        });
    }

    $.fn.editable.defaults.mode = 'inline';
    $.fn.editableform.buttons =
  '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
    '<i class="fa fa-fw fa-check"></i>'+
  '</button>'+
  '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
    '<i class="fa fa-fw fa-times"></i>'+
  '</button>';

    $('.editable-element-text').editable({
        escape: false,
        success: function(response, newValue) {
            console.log(response); // Debug output from ajax.php
            if(response.status == 'error') return response.msg; //msg will be shown in editable form
        },
        error: function (xhr, status, error) {
            //var err = eval("(" + xhr.responseText + ")");
            return xhr.statusText;
        },
        params: function(params) {
            params.action = 'updateMailaccounts';
            return params;
        }
    });

    $('.editable-element-select-protocol').editable({
        defaultValue: 'imap',
        source: [
            {value: 'imap', text: 'IMAP'},
            {value: 'pop3', text: 'POP3'}
        ],
        success: function(response, newValue) {
            console.log(response); // Debug output from ajax.php
            if(response.status == 'error') return response.msg; //msg will be shown in editable form
        },
        error: function (xhr, status, error) {
            //var err = eval("(" + xhr.responseText + ")");
            return xhr.statusText;
        },
        params: function(params) {
            params.action = 'updateMailaccounts';
            return params;
        }
    });


    $('.editable-element-select-use-ssl').editable({
        defaultValue: '1',
        source: [
            {value: '1', text: 'On'},
            {value: '0', text: 'Off'}
        ],
        success: function(response, newValue) {
            console.log(response); // Debug output from ajax.php
            if(response.status == 'error') return response.msg; //msg will be shown in editable form
        },
        error: function (xhr, status, error) {
            //var err = eval("(" + xhr.responseText + ")");
            return xhr.statusText;
        },
        params: function(params) {
            params.action = 'updateMailaccounts';
            return params;
        }
    });


    $('.editable-element-select-no-valid-cert').editable({
        defaultValue: '0',
        source: [
            {value: '0', text: 'On'},
            {value: '1', text: 'Off'}
        ],
        success: function(response, newValue) {
            console.log(response); // Debug output from ajax.php
            if(response.status == 'error') return response.msg; //msg will be shown in editable form
        },
        error: function (xhr, status, error) {
            //var err = eval("(" + xhr.responseText + ")");
            return xhr.statusText;
        },
        params: function(params) {
            params.action = 'updateMailaccounts';
            return params;
        }
    });


    $('#add-mailaccount').on('click', function(e) {
        e.preventDefault();
        var uId = $(this).attr('data-uid');
        $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {'action': 'addDefaultMailaccount', 'user-id': uId},
                success: function (result) {
                    console.log(result);
                    location.reload();
                }
            });
    });

    function fancyBoxLoader() {
        $.ajax({
            url: 'ajax.php',
            data: {'action': 'getMailAccountsByUid', 'uId': $('.manage-mailboxfolder').attr('data-uid')},
            type: 'GET',
            global: false,
            async: true,
            dataType: 'json',
            success: function(data) {
                result = data;

                $('.editable-element-select-mailaccount').editable({
                    //defaultValue: '0',
                    source: result,
                    success: function(response, newValue) {
                        console.log(response); // Debug output from ajax.php
                        if(response.status == 'error') return response.msg; //msg will be shown in editable form
                    },
                    error: function (xhr, status, error) {
                        //var err = eval("(" + xhr.responseText + ")");
                        return xhr.statusText;
                    },
                    params: function(params) {
                        params.action = 'updateMailfolder';
                        return params;
                    }
                });
            }
        });

        $('.editable-element-text').editable({
            escape: false,
            success: function(response, newValue) {
                console.log(response); // Debug output from ajax.php
                if(response.status == 'error') return response.msg; //msg will be shown in editable form
            },
            error: function (xhr, status, error) {
                //var err = eval("(" + xhr.responseText + ")");
                return xhr.statusText;
            },
            params: function(params) {
                params.action = 'updateMailfolder';
                return params;
            }
        });

    }

    $('.remove-mailaccount').on('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {'action': 'removeMailaccount', 'id': id},
                success: function (result) {
                    console.log(result);
                    location.reload();
                }
            });
    });

    $('.remove-mailboxfolder').on('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('data-id');
        $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {'action': 'removeMailboxFolder', 'id': id},
                success: function (result) {
                    console.log(result);
                    location.reload();
                }
            });
    });

    $('#add-mailboxfolder').on('click', function(e) {
        e.preventDefault();
        var uId = $(this).attr('data-uid');
        var lId = $(this).attr('data-lid');
        $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {'action': 'addDefaultMailfolder', 'user-id': uId, 'label-id': lId},
                success: function (result) {
                    console.log(result);
                    location.reload();
                },
                error: function(result) {
                    console.log(result);
                }
            });
    });

    switch(getUrlGetParameter("action")) {
        case 'settings':
            getMailboxStatus();
            break;
        case 'manage-label':
            loadBox('.manage-mailboxfolder', function() {});
            break;
        case 'label':
            loadBox('#new-document', function() { reloadDraftVars(); });
            newDocumentListener();
            break;
        default:
            break;
    }

});