var $wowidgetselector = function (id) {
    this.containerId = id;
    this.title = GetTextByKey("P_WO_WIDGETS", '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 = createGridView(parent);
        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';
        };
        grid.columns = [
            {
                // checkbox
                name: 'check',
                key: 'Visible',
                width: 45,
                align: 'center',
                sortable: false,
                allcheck: true,
                type: 3
            },
            {
                key: 'WidgetName',
                caption: 'Name',
                width: 290,
                styleFilter: styleFilter,
                bgFilter: bgFilter
            },
            {
                key: 'InBottom',
                caption: 'Bottom',
                //captionTooltip: 'Multiple widgets may be placed on the bottom',
                type: 3,
                width: 80,
                enabled: 'Visible',
                onChanged: function (item) {
                    item.InRight = !item.InBottom;
                    grid.refresh();
                }
            },
            {
                key: 'InRight',
                caption: 'Right',
                //captionTooltip: 'Only one widget may be placed on the right',
                type: 3,
                width: 70,
                enabled: 'Visible',
                onChanged: function (item) {
                    item.InBottom = !item.InRight;
                    grid.refresh();
                }
            }
        ];
        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_WO_WHICHWIDGETSSHOULDBEDISPLAYED", 'Which Widgets Should be Displayed?')).appendTo(labeldiv);

        this.widgetList = $('<div style="width: 520px; height: 320px; margin: 10px 0 4px; position: relative"></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_WO_ERROR", 'Error'), title);
                maskbg.hide();
                return;
            }
            var items = [];
            for (var i = 0; i < widgetdata.length; i++) {
                var item = widgetdata[i];
                item.Visible = false;
                for (var j = 0; j < data.length; j++) {
                    var wd = data[j];
                    if (item.WidgetId == wd.WidgetId) {
                        item.Visible = true;
                        item.InBottom = wd.Position != 1;
                        item.InRight = wd.Position == 1;
                        break;
                    }
                }
                if (!item.InBottom && !item.InRight) {
                    item.InBottom = true;
                }
                items.push(item);
            }

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

    function onOKClick() {
        var _this = this;
        var alerttitle = GetTextByKey("P_WO_SAVEWIDGETS", "Save Widgets");
        var param = JSON.stringify(this.gridWidgets.source.map(function (w) {
            return {
                WidgetId: w.WidgetId,
                Category: w.Category,
                Visible: w.Visible,
                Position: w.InRight ? 1 : 0
            };
        }));
        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_WO_WIDGETS", 'Widget');
        worequest("GetWorkOrderWidgets", "", function (data) {
            if (typeof data === 'string') {
                showAlert(GetTextByKey("P_WO_ERROR", 'Error'), title);
                return;
            }
            for (var w of data) {
                w.InBottom = w.Position != 1;
                w.InRight = w.Position == 1
            }
            _this.workorderwidgets = data;
            $(window).resize();
            if (data?.length > 0) {
                var displayBottom = data.find(function (w) { return w.InBottom }) != null ? '' : 'none';
                var hasRight = data.find(function (w) { return w.InRight }) != null;
                var displayRight = hasRight ? '' : 'none';
                $('#workorderspliter').css('display', displayBottom);
                $('#workorderdetail').css('display', spliterProps.collapsed ? 'none' : displayBottom);
                $('#workorderspliter_right').css('display', displayRight);
                var right = $('#workorderdetail_right');
                right.css('display', spliterProps.collapsed_right ? 'none' : displayRight);
                if (hasRight) {
                    ui.createTab(right[0]);
                }
                _this.showWorkOrderWidgets();
                if (hasRight) {
                    right.find('.ui-tab-header>.ui-tab-title:first').click();
                }
                _this.getWorkOrderContacts(_this.workorderid);
                setTimeout(function () {
                    document.querySelector('#workorderdetail').scrollTop = 0;
                }, 0);
            } else {
                $('#workorderspliter').css('display', 'none');
                $('#workorderdetail').css('display', 'none');
                $('#workorderspliter_right').css('display', 'none');
                $('#workorderdetail_right').css('display', 'none');
            }
        }, function () {
            showAlert(GetTextByKey("P_WO_FAILEDTOGETTHEWORKORDERWIDGETLIST", '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);
                this.widgets[w.WidgetId]?.close?.();
            }
        }
        this.getWorkOrderWidgets();
    };

    this.onmsgreceived = function (data) {
        if (this.workorderwidgets != null) {
            if (data && this.workorderid == data.Message) {
                var wid = this.workorderid;
                if (data.Code == "501") {
                    if (this.workorderwidgets && this.workorderwidgets.length > 0) {
                        for (let w of this.workorderwidgets) {
                            this.widgets[w.WidgetId]?.changewo(wid);
                        }
                        this.getWorkOrderContacts(this.workorderid);
                    }
                }
                else if (data.Code == "503" || data.Code == "504" || data.Code == "507") {
                    this.widgets['CustomerCommunication']?.changewo(wid);
                    this.getWorkOrderContacts(this.workorderid);
                }
                else if (data.Code == "505") {
                    this.widgets['InternalComments']?.changewo(wid);
                }
                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);
                        this.widgets[w.WidgetId]?.close?.();
                    }
                    this.workorderwidgets = null;
                    this.popups = {};
                    this.widgets = {};
                    $('#workorderspliter').css('display', 'none');
                    $('#workorderdetail').css('display', 'none');
                    $(window).resize();
                }
                else if (data.Code == "508") {
                    this.widgets['Alerts']?.changewo(wid);
                }
                else if (data.Code == "509") {
                    this.widgets['Segments']?.changewo(wid);
                }
                else if (data.Code == "510") {
                    this.widgets['Attachments']?.changewo(wid);
                }
                else if (data.Code == "511") {
                    this.widgets['Inspections']?.changewo(wid);
                    this.widgets['Attachments']?.changewo(wid);
                    this.widgets['Alerts']?.changewo(wid);
                }
                else if (data.Code == "512") {
                    this.widgets['Estimates']?.changewo(wid);
                }
                else if (data.Code == "513") {
                    this.widgets['Invoices']?.changewo(wid);
                }
            }
        }
    };

    this.reloaddata = function (widgetid) {
        if (this.workorderwidgets != null) {
            var wid = this.workorderid;
            this.widgets[widgetid]?.changewo(wid);
        }
        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) {
            if (w.InBottom) {
                this.createWidgetDialog(w);
            }
            if (w.InRight) {
                this.createWidgetDialog(w, true);
            }
        }
    }

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

        var title = GetTextByKey("P_WO_WIDGET", 'Widget');
        worequest('SaveWorkOrderWidgetLayout', JSON.stringify(widget), function (data) {
            if (data === 'OK') {
                return;
            }
            showAlert(data, title);
        }, function () {
            showAlert(GetTextByKey("P_WO_FAILEDTOSAVETHEWORKORDERWIDGETLAYOUT", '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) {
                    _this.widgets[w.WidgetId]?.updatecontact?.(data);
                }
            }
        }, function () {
        });
    };

    this.createWidgetDialog = function (widget, right) {
        const ui = window['lib-ui'];
        var container = ui.createElement('div', 'class-content');
        var opts;

        let layout = widget.Layout;
        if (right) {
            opts = {
                title: widgetdata.find(function (v) { return v.WidgetId == widget.WidgetId })?.WidgetName,
                content: container,
                mask: false,
                closable: false,
                movable: false,
                resizable: false
            };
        } else {
            let width = $(document.body).width();
            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 >= spliterProps.widgetHeight) {
                    top = spliterProps.widgetHeight - 40;
                }
                x++;
                this.defX = x;
                layout = { left, top, width: 300, height: 400 };
            } else {
                layout = JSON.parse(widget.Layout);
                if (layout.top >= spliterProps.widgetHeight) {
                    layout.top = spliterProps.widgetHeight - 40;
                }
                if (layout.left >= width) {
                    layout.left = width - 10;
                }
            }
            let zIndex = this.currentZIndex--;

            var _this = this;
            opts = {
                title: widgetdata.find(function (v) { return v.WidgetId == widget.WidgetId })?.WidgetName,
                content: container,
                mask: false,
                // movable: false,
                resizable: true,
                collapsable: true,
                zIndex,
                changeZIndex: true,
                minWidth: 210,
                minHeight: 200,
                onMoveEnded: function () { _this.saveWorkOrderWidgets(widget, popup.rect) },
                onResizeEnded: function () { _this.saveWorkOrderWidgets(widget, popup.rect) }
            };
        }
        const popup = new ui.Popup(opts);
        if (right) {
            var right = document.querySelector('#workorderdetail_right');
            var header = right.querySelector('.ui-tab-header');
            header.append(ui.createElement('span', function (span) {
                span.className = 'ui-tab-title';
                span.dataset.for = widget.WidgetId;
                span.innerText = opts.title;
            }));
            popup.show(right);
            popup.container.parentElement.classList.add('ui-tab-page');
            popup.container.parentElement.dataset.page = widget.WidgetId;
        } else {
            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;
            },
            inwidget: true
        };
        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_STATUSLINKINCLUDED', 'Status Link Included') :
                            GetTextByKey('P_WO_STATUSLINKEXCLUDED', 'Status Link Excluded'));
                    }
                });
                ui.setTooltip(checkLink, GetTextByKey('P_WO_STATUSLINKEXCLUDED', '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;
            case 'CustomerRecordComments': content = new $wocrcomment(options); break;
        }
        if (content != null) {
            this.widgets[widget.WidgetId] = content;
            content.changewo(this.workorderid, this.assetid, this.wo);
        }
    };
}