var $wowidgetselector = function (id) {
    this.containerId = id;
    this.title = GetTextByKey("P_XXX", 'Widgets');
    this.companyId = null;;
    this.forceSingle = false;
    this.exceptShareAsset = false;
    this.onOK = null;
    this.onDialogClosed = null;
    this.includechild = true;
    this.allowhidden = true;
    this.uid = null;
};

(function () {
    var __proto = $wowidgetselector.prototype;

    function initWidgetsGrid(parent) {
        var grid = new GridView(parent);
        grid.lang = {
            all: GetTextByKey("P_GRID_ALL", "(All)"),
            ok: GetTextByKey("P_GRID_OK", "OK"),
            reset: GetTextByKey("P_GRID_RESET", "Reset")
        };
        var styleFilter = function (item) {
            if (item.Suggested) {
                return {
                    //'background-color': 'yellow',
                    'display': 'block',
                    'margin': 0,
                    'box-sizing': 'border-box',
                    'padding': '0 4px',
                    'height': '27px',
                    'line-height': '27px',
                    'overflow': 'hidden',
                    'text-overflow': 'ellipsis'
                };
            }
        };
        var bgFilter = function (item) {
            if (item.Suggested)
                return 'yellow';
        };
        var columns = [];
        columns.push({
            // checkbox
            name: 'check',
            key: 'Visible',
            width: 45,
            align: 'center',
            sortable: false,
            allcheck: true,
            type: 3
        },
            {
                key: 'WidgetName',
                caption: 'Name',
                width: 300,
                styleFilter: styleFilter,
                bgFilter: bgFilter
            });
        //grid.canMultiSelect = true;
        grid.columns = columns;
        grid.init();

        this.gridWidgets = grid;
    }

    function createDialog() {
        var dialog = $('<div class="dialog" style="display: none; width: 550px; height: 440px">').attr('id', this.containerId);

        var title = $('<div class="dialog-title"></div>').appendTo(dialog);
        title.append($('<span class="title"></span>').text(this.title));
        title.append('<em class="dialog-close"></em>');

        var content = $('<div class="dialog-content"></div>').appendTo(dialog);

        var labeldiv = $('<div style="margin: 4px 0 0 10px; line-height: 25px"></div>').appendTo(content);
        $('<span></span>').text(GetTextByKey("P_XXX", 'Which Widgets Should be Displayed?')).appendTo(labeldiv);

        this.widgetList = $('<div style="width: 520px; height: 320px; margin: 10px 0 4px"></div>').appendTo(content);

        var dialogFunction = $('<div class="dialog-func"></div>').appendTo(dialog);
        $('<input type="button" value="' + GetTextByKey("P_SELECTASSETS_CANCEL", "Cancel") + '" class="dialog-close" />').appendTo(dialogFunction).css("height", 'unset');
        $('<input type="button" value="' + GetTextByKey("P_SELECTASSETS_OK", "OK") + '" />').click(onOKClick.bind(this)).appendTo(dialogFunction);
        $('<div class="clear"></div>').appendTo(dialogFunction);

        $('<div class="maskbg" style="display: none"><div class="loading_icon icon c-spin"></div></div>').appendTo(dialog);

        // init
        initWidgetsGrid.call(this, this.widgetList);
        $(document.body).append(dialog);

        dialog.dialog(this.onDialogClosed);
        return dialog;
    }

    __proto.showSelector = function (topRatio, force) {
        var dialog;
        if (force) {
            $('#' + this.containerId).remove();
            dialog = createDialog.call(this);
        } else {
            dialog = $('#' + this.containerId);
            if (!dialog.length) {
                dialog = createDialog.call(this);
            }
        }
        this.dialog = dialog;
        dialog.attr('init', '1').css({
            'top': (document.documentElement.clientHeight - dialog.height()) / (topRatio || 3),
            'left': (document.documentElement.clientWidth - dialog.width()) / 2
        }).showDialogfixed();
        this.gridWidgets.setData(widgetdata);
        onSearch.call(this);
    };

    function worequest(method, param, callback, error) {
        var path = "";
        if (_network.root != null && _network.root.length > 0) {
            path = "Maintenance/";
        }
        _network.request(path + "WorkOrderMaintenance.aspx", -1, method, param, callback, error || function (e) {
            console.log(e);
        });
    }

    function onSearch() {
        var maskbg = this.dialog.find('.maskbg');
        maskbg.show();
        var gridWidgets = this.gridWidgets;
        var title = this.title;

        worequest("GetWorkOrderWidgets", "", function (data) {
            if (typeof data === 'string') {
                showAlert(GetTextByKey("P_XXX", 'Error'), title);
                maskbg.hide();
                return;
            }
            var items = [];
            for (var i = 0; i < widgetdata.length; i++) {
                var item = widgetdata[i].Values;
                for (var j = 0; j < data.length; j++) {
                    if (item.WidgetId == data[j].WidgetId) {
                        item.Visible = true;
                        break;
                    }
                }
                items.push({ Values: item });
            }

            gridWidgets.setData(items);
            maskbg.hide();
        }, function () {
            showAlert(GetTextByKey("P_XXXX", 'Failed to get the work order widget list.'), title);
            maskbg.hide();
        });
    }

    function onOKClick() {
        var widgets = [];
        for (var i = 0; i < this.gridWidgets.source.length; i++) {
            widgets.push(this.gridWidgets.source[i].Values);
        }

        var _this = this;
        var alerttitle = GetTextByKey("P_WO_XXX", "Save Widgets");
        var param = JSON.stringify(widgets);
        param = htmlencode(param);
        worequest("SaveWorkOrderWidgets", param, function (data) {
            if (data !== 'OK') {
                showAlert(data, alerttitle);
                return;
            }
            _this.onOK && _this.onOK();
            _this.dialog.hideDialog();
            showmaskbg(false);
        }, function (err) {
        });
    }
})();

var WorkOrderWidget = function () {
    this.workorderid = null;
    this.assetid = null;
    this.workorderwidgets = null;
    this.widgets = {};
    this.popups = {};
    var _this = this;
    this.getWorkOrderWidgets = function () {
        this.workorderwidgets = null;
        var title = GetTextByKey("P_XXX", 'Widget');
        worequest("GetWorkOrderWidgets", "", function (data) {
            if (typeof data === 'string') {
                showAlert(GetTextByKey("P_XXX", 'Error'), title);
                return;
            }
            _this.workorderwidgets = data;
            var display = data?.length > 0 ? 'block' : 'none';
            $('#workorderspliter').css('display', display);
            $('#workorderdetail').css('display', display);
            _this.showWorkOrderWidgets();
            _this.getWorkOrderContacts(_this.workorderid);
            setTimeout(function () {
                $(window).resize();
                document.querySelector('#workorderdetail').scrollTop = 0;
            }, 0);
        }, function () {
            showAlert(GetTextByKey("P_XXXX", 'Failed to get the work order widget list.'), title);
        });
    }

    this.changeWorkOrder = function (wo) {
        window.workorderid = this.workorderid = wo.Id.Value;
        window.machineid = this.assetid = wo.AssetId;
        this.wo = wo;
        if (!this.workorderwidgets) {
            this.getWorkOrderWidgets();
        } else {
            for (let w of this.workorderwidgets) {
                if (Object.prototype.hasOwnProperty.call(this.widgets, w.WidgetId)) {
                    this.widgets[w.WidgetId].changewo(this.workorderid, this.assetid, wo);
                }
            }
            this.getWorkOrderContacts(this.workorderid);
        }
    }

    this.reloadWidgets = function () {
        if (this.workorderwidgets != null) {
            for (let w of this.workorderwidgets) {
                this.popups[w.WidgetId]?.close(false);
                if (this.widgets[w.WidgetId] && typeof this.widgets[w.WidgetId].close == 'function')
                    this.widgets[w.WidgetId].close();
            }
        }
        this.getWorkOrderWidgets();
    };

    this.onmsgreceived = function (data) {
        if (this.workorderwidgets != null) {
            if (data && this.workorderid == data.Message) {
                if (data.Code == "501") {
                    for (let w of this.workorderwidgets) {
                        this.widgets[w.WidgetId].changewo(this.workorderid);
                    }
                    this.getWorkOrderContacts(this.workorderid);
                }
                else if (data.Code == "503" || data.Code == "504" || data.Code == "507") {
                    this.widgets['CustomerCommunication']?.changewo(this.workorderid);
                    this.getWorkOrderContacts(this.workorderid);
                }
                else if (data.Code == "505") {
                    this.widgets['InternalComments']?.changewo(this.workorderid);
                }
                else if (data.Code == "506") {
                    this.getWorkOrderContacts(this.workorderid);
                }
                else if (data.Code == "502")//delete
                {
                    for (let w of this.workorderwidgets) {
                        this.popups[w.WidgetId]?.close(false);
                        if (this.widgets[w.WidgetId] && typeof this.widgets[w.WidgetId].close == 'function')
                            this.widgets[w.WidgetId].close();
                    }
                    this.workorderwidgets = null;
                    this.popups = [];
                    this.widgets = [];
                    $('#workorderspliter').css('display', 'none');
                    $('#workorderdetail').css('display', 'none');
                    $(window).resize();
                }
            }
        }
    };

    this.reloaddata = function (widgetid) {
        if (this.workorderwidgets != null) {
            this.widgets[widgetid]?.changewo(this.workorderid);
        }
        this.getWorkOrderContacts(this.workorderid);
    };

    this.showWorkOrderWidgets = function () {
        this.defX = 0;
        this.defY = 0;
        this.currentZIndex = 200 + this.workorderwidgets.length;
        for (let w of this.workorderwidgets) {
            this.createWidgetDialog(w);
        }
    }

    this.saveWorkOrderWidgets = function (widget, layout) {
        widget.Layout = JSON.stringify(layout);

        var title = GetTextByKey("P_XXX", 'Widget');
        worequest('SaveWorkOrderWidgetLayout', JSON.stringify(widget), function (data) {
            if (data === 'OK') {
                return;
            }
            showAlert(data, title);
        }, function () {
            showAlert(GetTextByKey("P_XXXX", 'Failed to save the work order widget layout.'), title);
        });
    };

    this.getWorkOrderContacts = function (woid) {
        worequest('GetWorkOrderContacts', woid, function (data) {
            if (typeof (data) === "string") {
                showAlert(data, GetTextByKey('P_CUSTOMERRECORD', "Customer Record"));
                return;
            }
            if (_this.workorderwidgets != null) {
                for (let w of _this.workorderwidgets) {
                    if (_this.widgets[w.WidgetId] && typeof _this.widgets[w.WidgetId].updatecontact == 'function')
                        _this.widgets[w.WidgetId].updatecontact(data);
                }
            }
        }, function () {
        });
    };

    this.createWidgetDialog = function (widget) {
        const ui = window['lib-ui'];

        let width = $(document.body).width();
        let layout = widget.Layout;
        if (!layout || layout === '') {
            let x = this.defX;
            let y = this.defY;
            let left = 10 + 315 * x;
            if (left + 300 > width) {
                x = 0;
                left = 10;
                y++;
                this.defY = y;
            }
            let top = 10 + 165 * y;
            if (top >= widgetHeight) {
                top = widgetHeight - 40;
            }
            x++;
            this.defX = x;
            layout = { left, top, width: 300, height: 400 };
        } else {
            layout = JSON.parse(widget.Layout);
            if (layout.top >= widgetHeight) {
                layout.top = widgetHeight - 40;
            }
            if (layout.left >= width) {
                layout.left = width - 10;
            }
        }
        let zIndex = this.currentZIndex--;

        var container = ui.createElement('div', 'class-content');
        var _this = this;
        const popup = new ui.Popup({
            title: widgetdata.find(function (v) { return v.Values.WidgetId == widget.WidgetId })?.Values?.WidgetName,
            content: container,
            mask: false,
            // movable: false,
            resizable: true,
            collapsable: true,
            zIndex,
            changeZIndex: true,
            minWidth: 210,
            minHeight: 200,
            buttons: [
                //{
                //    text: 'Loading', trigger: p => {
                //        p.loading = true;
                //        setTimeout(() => p.loading = false, 1000);
                //        return false;
                //    }
                //},
                //{ text: 'OK' }
            ],
            onMoveEnded: function () { _this.saveWorkOrderWidgets(widget, popup.rect) },
            onResizeEnded: function () { _this.saveWorkOrderWidgets(widget, popup.rect) }
        });
        popup.show(document.querySelector('#workorderdetail'));
        popup.rect = layout;
        this.popups[widget.WidgetId] = popup;

        let options = {
            parent: $(container),
            canExport: canExport,
            showloading: function (flag) {
                popup.loading = flag;
            }
        };
        let content;
        switch (widget.WidgetId) {
            case 'CustomerCommunication':
                content = new $wocommunication(options);
                let checkLink = ui.createCheckbox({
                    className: 'check-status-link',
                    enabled: !content.customer.readonly,
                    checkedNode: ui.createIcon('fa-regular', 'link'),
                    uncheckedNode: ui.createIcon('fa-regular', 'unlink'),
                    onchange: function () {
                        content.customer.statusLink = this.checked;
                        ui.setTooltip(checkLink, this.checked ?
                            GetTextByKey('P_WO_XXXXXX', 'Status Link Included') :
                            GetTextByKey('P_WO_XXXXXX', 'Status Link Excluded'));
                    }
                });
                ui.setTooltip(checkLink, GetTextByKey('P_WO_XXXXXX', 'Status Link Excluded'));
                $(checkLink).insertAfter(options.parent.parents('.ui-popup-container').find('.ui-popup-header>.ui-popup-header-title'));
                break;
            case 'InternalComments': content = new $wointernal(options); break;
            case 'Alerts': content = new $woalert(options); break;
            case 'Segments': content = new $wosegment(options); break;
            case 'Attachments': content = new $woattachment(options); break;
            case 'Inspections': content = new $woinspection(options); break;
            case 'Estimates': content = new $woestimate(options); break;
            case 'Invoices': content = new $woinvoice(options); break;
        }
        if (content != null) {
            this.widgets[widget.WidgetId] = content;
            content.changewo(this.workorderid, this.assetid, this.wo);
        }
    };
}