let usersGrid = $("#usersGrid").kendoGrid({
    noRecords: {
        template: "Fant ingen brukere"
    },
    filterable: true,
    sortable: false,
    resizable: true,
    scrollable: true,
    messages: {
        commands: {
            cancel: "Avbryt endringer",
            canceledit: "Avbryt",
            create: "Legg til ny bruker",
            destroy: "Slett",
            edit: "Rediger",
            save: "Lagre endringer",
            select: "Velg",
            update: "Oppdater"
        }
    },
    editable: {
        mode: "inline",
        confirmation: "Er du sikker på at du vil slette denne brukeren?",
        cancelDelete: "Avbryt",
        confirmDelete: "Jeg er sikker"
    },
    toolbar: ["create", "search"],
    dataSource: {
        transport: {
            read: "/api/users",
            destroy: {
                url: "/api/users/delete",
                contentType: "application/json",
                method: "delete"
            },
            create: {
                url: "/api/users/create",
                method: "post",
                contentType: "application/json"
            },
            update: {
                url: "/api/users/update",
                contentType: "application/json",
                method: "put"
            },
            parameterMap: function (data, type) {
                if (data.email) {
                    if (!$.isEmail(data.email)) {
                        $.notificate("Ugyldig e-postadresse", "", "error");
                        return false;
                    }
                }
                switch (type) {
                    case "create":
                        return JSON.stringify({
                            name: data.name,
                            email: data.email,
                            role: data.role
                        });
                    case "read":
                        break;
                    default:
                        return JSON.stringify({
                            name: data.name,
                            role: data.role,
                            email: data.email,
                            id: data.id
                        });
                }
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {editable: false},
                    name: {
                        editable: true,
                        validation: {required: true}
                    },
                    role: {
                        editable: true,
                        validation: {required: true},
                    },
                    email: {
                        editable: true,
                        validation: {required: true}
                    }
                }
            }
        },
        error: function (e) {
            if (e.xhr.responseJSON.error) {
                $.notificate("En feil oppstod", e.xhr.responseJSON.error ? e.xhr.responseJSON.error : "Vennligst prøv igjen senere", "error");
            }
        },
        requestEnd: function (e) {
            switch (e.type) {
                case "create":
                    $.notificate(
                        "Bruker opprettet",
                        "En velkomstmail er sendt til " + e.response.email,
                        "success"
                    );
                    usersGrid.dataSource.read();
                    break;
                case "update":
                    $.notificate(
                        "Bruker oppdatert",
                        "Brukeren er oppdatert",
                        "success"
                    );
                    usersGrid.dataSource.read();
                    break;
                case "destroy":
                    $.notificate(
                        "Bruker slettet",
                        "Brukeren <b>" + e.response + "</b> er slettet.",
                        "success"
                    );
                    usersGrid.dataSource.read();
                    break;
            }
        },
    },
    columns: [
        {
            field: "name",
            title: "Navn",
            filterable: {
                multi: true,
                search: true
            }
        },
        {
            field: "email",
            title: "E-post",
            filterable: false,
            template:
                '<a href="mailto:#=data.email#" class="link" title="Send mail til #=data.email#">#=data.email# <i class="at icon"></i></a>'
        },
        {
            field: "role",
            title: "Rolle",
            filterable: {
                multi: true,
                search: false
            },
            values: [
                {text: "Administrator", value: 1},
                {text: "Vanlig", value: 0}
            ]
        },
        {
            command: ["edit", "destroy"],
            title: "&nbsp;",
            width: "300px"
        }
    ]
}).data("kendoGrid");

$(function () {

    let minTableWidth;
    let minColumnWidth = 100;
    let th;
    let idx;
    let grid;

    usersGrid.resizable.bind("start", function (e) {
        th = $(e.currentTarget).data("th");
        idx = th.index();
        grid = th.closest(".k-grid").data("kendoGrid");
    });

    usersGrid.resizable.bind("resize", function (e) {
        if (th.width() >= minColumnWidth) {
            minTableWidth = grid.tbody.closest("table").width();
        }

        if (th.width() < minColumnWidth) {
            // the next line is ONLY needed if Grid scrolling is enabled
            grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);

            grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
        }
    });
});