// window.zpLibrary = window.zpLibrary || {};
// var zpLibrary = window.zpLibrary || {};

(function($) {
    if(!$) {
        console.error("jQuery should be loaded before loading the pinch plugin");
        return null;
    }

    $.fn.pinch = function(options) {
        let width = pixelStringToNumber(this.css('width'));
        let height = pixelStringToNumber(this.css('height'));
        let left = pixelStringToNumber(this.css("left"));
        let top = pixelStringToNumber(this.css("top"));
        let eleUI = {
            position: { left: left, top: top },
            size: { width: width, height: height }
        };
        let pointers = [];
        let curPinchDimensions = {};
        let suppressCancel = false;
        this.on('pointerdown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (e.originalEvent) {
                e.originalEvent.preventDefault();
                e.originalEvent.stopPropagation();
            }
            const event = e.originalEvent ? e.originalEvent : e;
            this.setPointerCapture(event.pointerId);
            pointers.push({ id: event.pointerId, x: event.screenX, y: event.screenY, isPrimary: event.isPrimary })
        });
        this.on('pointerup', function(e) {
            const event = e.originalEvent ? e.originalEvent : e;
            pointers = pointers.filter((ptr) => { return ptr.id !== event.pointerId });
            this.releasePointerCapture(e.pointerId);
            if (0 === pointers.length) {
                curPinchDimensions = {};
                actions.pinchStopCallback();
            }
        });
        this.on('pointercancel', function(e) {
            if (suppressCancel) {
                let self = this;
                pointers.forEach(ptr => {
                    try {
                        self.setPointerCapture(ptr.id);
                    } catch (err) {
                        console.error("Error capturing pointer with id: " + ptr.id);
                    }
                });
                return;
            }
            pointers = [];
            curPinchDimensions = {};
            try {
                this.releasePointerCapture(e.pointerId);
            } catch (err) {
                console.log("Error releasing pointer capture: " + err);
            }
            actions.pinchStopCallback();
        });
        this.on('pointermove', function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (e.originalEvent) {
                e.originalEvent.preventDefault();
                e.originalEvent.stopPropagation();
            }
            const event = e.originalEvent ? e.originalEvent : e;
            const curPointer = pointers.filter((ptr) => { return ptr.id === event.pointerId })[0];
            if (!curPointer) {
                //CRN250617 For some reason, we sometimes get events for pointers that are not in our list.
                console.warn("Pointer with id: " + event.pointerId + ", was not found in our list of pointers.");
                console.warn("Event = ", event);
                console.warn("Pointer list = ", pointers);
                return;
            }
            curPointer.x = event.screenX;
            curPointer.y = event.screenY;
            if (2 === pointers.length) {
                if (!curPinchDimensions.width) {
                    curPinchDimensions.width = actions.calculateWidth();
                    curPinchDimensions.height = actions.calculateHeight();
                }
                else {
                    const curWidth = actions.calculateWidth() - curPinchDimensions.width;
                    const curHeight = actions.calculateHeight() - curPinchDimensions.height;
                    curPinchDimensions.width = actions.calculateWidth();
                    curPinchDimensions.height = actions.calculateHeight();
                    const adjustX = curWidth * 0.66;
                    const adjustY = curHeight * 0.66;
                    eleUI = actions.adjustUI(eleUI, adjustX, adjustY);
                    // $resizable.css('width', eleUI.size.width + "px");
                    // $resizable.css('height', eleUI.size.height + "px");
                    actions.pinchCallback(eleUI);
                }
            }
        });

        let actions = {
            pinchCallback: function(evt) {
                console.warn("This function should be overridden with a passed-in pinch function in order to react to the pinch operation.");
            },
            pinchStopCallback: function() {
                // Do nothing here. If there is something that needs to be done, the function will be passed in.
            },
            adjustUI: function(ui, adjustX, adjustY) {
                // const newLeft = ui.position.left + adjustX;
                const newLeft = ui.position.left;
                // const newTop = ui.position.top + adjustY;
                const newTop = ui.position.top;
                const newWidth = ui.size.width + adjustX;
                const newHeight = ui.size.height + adjustY;
                // return new object
                return {
                    position: { left: newLeft > 0 ? newLeft : 0, top: newTop > 0 ? newTop : 0 },
                    size: { width: newWidth > 0 ? newWidth : 0, height: newHeight > 0 ? newHeight : 0 }
                }
            },
            calculateWidth: function() {
                return Math.abs(pointers[1].x - pointers[0].x);
            },
            calculateHeight: function() {
                return Math.abs(pointers[1].y - pointers[0].y);
            }
        };

        if (options.pinch &&  (typeof options.pinch === "function")) {
            actions.pinchCallback = options.pinch;
        }
        if (options.pinchStop && (typeof options.pinchStop === "function")) {
            actions.pinchStopCallback = options.pinchStop;
        }
        suppressCancel = options.suppressCancel;
    }
    return this;
})(jQuery);