import {Controller} from "../Controller.js";
import {Frustum, frustumIntersectsAABB3, math, setFrustum} from "@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";

const LEFT_TO_RIGHT = 0;
const RIGHT_TO_LEFT = 1;

/** @private */
export class MarqueeSelectionTool extends Controller {

    constructor(parent, cfg) {

        super(parent);

        if (!cfg.buttonElement) {
            throw "Missing config: buttonElement";
        }

        this._objectsKdTree3 = cfg.objectsKdTree3;
        this._marquee = math.AABB2();
        this._marqueeFrustum = new Frustum();
        this._marqueeFrustumProjMat = math.mat4();
        this._marqueeDir = false;

        const buttonElement = cfg.buttonElement;

        this.on("enabled", (enabled) => {
            if (!enabled) {
                buttonElement.classList.add("disabled");
            } else {
                buttonElement.classList.remove("disabled");
            }
        });

        this.on("active", (active) => {
            if (active) {
                buttonElement.classList.add("active");
                const nop = this._objectsKdTree3.root; // Lazy-build the kd-tree
            } else {
                buttonElement.classList.remove("active");
            }
        });

        buttonElement.addEventListener("click", (event) => {
            if (this.getEnabled()) {
                const active = this.getActive();
                this.setActive(!active);
            }
            event.preventDefault();
        });

        this.bimViewer.on("reset", () => {
            this.setActive(false);
        });

        const scene = this.viewer.scene;
        const canvas = scene.canvas.canvas;

        this._marqueeElement = document.createElement('div');
        document.body.appendChild(this._marqueeElement);

        const marqueeElement = this._marqueeElement;
        const marqueeStyle = marqueeElement.style;
        marqueeStyle.position = "absolute";
        marqueeStyle["z-index"] = "40000005";
        marqueeStyle.width = 8 + "px";
        marqueeStyle.height = 8 + "px";
        marqueeStyle.visibility = "hidden";
        marqueeStyle.top = 0 + "px";
        marqueeStyle.left = 0 + "px";
        marqueeStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
        marqueeStyle["opacity"] = 1.0;
        marqueeStyle["pointer-events"] = "none";

        let canvasDragStartX;
        let canvasDragStartY;
        let canvasDragEndX;
        let canvasDragEndY;

        let canvasMarqueeStartX;
        let canvasMarqueeStartY;
        let canvasMarqueeEndX;
        let canvasMarqueeEndY;

        let isMouseDragging = false;
        let mouseWasUpOffCanvas = false;

        canvas.addEventListener("mousedown", (e) => {
            if (!this.getActive() || !this.getEnabled()) {
                return;
            }
            if (e.button !== 0) { // Left button only
                return;
            }
            const input = this.bimViewer.viewer.scene.input;
            if (!input.keyDown[input.KEY_CTRL]) { // Clear selection unless CTRL down
                scene.setObjectsSelected(scene.selectedObjectIds, false);
            }
            canvasDragStartX = e.pageX;
            canvasDragStartY = e.pageY;
            marqueeStyle.visibility = "visible";
            marqueeStyle.left = `${canvasDragStartX}px`;
            marqueeStyle.top = `${canvasDragStartY}px`;
            marqueeStyle.width = "0px";
            marqueeStyle.height = "0px";
            marqueeStyle.display = "block";
            canvasMarqueeStartX = e.offsetX;
            canvasMarqueeStartY = e.offsetY;
            isMouseDragging = true;
            this.viewer.cameraControl.pointerEnabled = false; // Disable camera rotation
        });

        canvas.addEventListener("mouseup", (e) => {
            if (!this.getActive() || !this.getEnabled()) {
                return;
            }
            if (!isMouseDragging && !mouseWasUpOffCanvas) {
                return
            }
            if (e.button !== 0) {
                return;
            }
            canvasDragEndX = e.pageX;
            canvasDragEndY = e.pageY;
            const width = Math.abs(canvasDragEndX - canvasDragStartX);
            const height = Math.abs(canvasDragEndY - canvasDragStartY);
            marqueeStyle.width = `${width}px`;
            marqueeStyle.height = `${height}px`;
            marqueeStyle.visibility = "hidden";
            isMouseDragging = false;
            this.viewer.cameraControl.pointerEnabled = true; // Enable camera rotation
            if (mouseWasUpOffCanvas) {
                mouseWasUpOffCanvas = false;
            }
            if (width > 3 || height > 3) { // Marquee pick if rectangle big enough
                this._marqueePick();
            }
        }); // Bubbling

        document.addEventListener("mouseup", (e) => {
            if (!this.getActive() || !this.getEnabled()) {
                return;
            }
            if (e.button !== 0) { // check if left button was clicked
                return;
            }
            if (!isMouseDragging) {
                return
            }
            marqueeStyle.visibility = "hidden";
            isMouseDragging = false;
            mouseWasUpOffCanvas = true;
            this.viewer.cameraControl.pointerEnabled = true;
        }, true); // Capturing

        canvas.addEventListener("mousemove", (e) => {
            if (!this.getActive() || !this.getEnabled()) {
                return;
            }
            if (e.button !== 0) { // check if left button was clicked
                return;
            }
            if (!isMouseDragging) {
                return
            }
            const x = e.pageX;
            const y = e.pageY;
            const width = x - canvasDragStartX;
            const height = y - canvasDragStartY;
            marqueeStyle.width = `${Math.abs(width)}px`;
            marqueeStyle.height = `${Math.abs(height)}px`;
            marqueeStyle.left = `${Math.min(canvasDragStartX, x)}px`;
            marqueeStyle.top = `${Math.min(canvasDragStartY, y)}px`;
            canvasMarqueeEndX = e.offsetX;
            canvasMarqueeEndY = e.offsetY;
            const marqueeDir = (canvasMarqueeStartX < canvasMarqueeEndX) ? LEFT_TO_RIGHT : RIGHT_TO_LEFT;
            this._setMarqueeDir(marqueeDir);
            this._marquee[0] = Math.min(canvasMarqueeStartX, canvasMarqueeEndX);
            this._marquee[1] = Math.min(canvasMarqueeStartY, canvasMarqueeEndY);
            this._marquee[2] = Math.max(canvasMarqueeStartX, canvasMarqueeEndX);
            this._marquee[3] = Math.max(canvasMarqueeStartY, canvasMarqueeEndY);
        });
    }

    _setMarqueeDir(marqueeDir) {
        if (marqueeDir !== this._marqueeDir) {
            this._marqueeElement.style["background-image"] =
                marqueeDir === LEFT_TO_RIGHT
                    /* Solid */ ? "url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%23333' stroke-width='4'/%3e%3c/svg%3e\")"
                    /* Dashed */ : "url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")";
            this._marqueeDir = marqueeDir;
        }
    }

    _marqueePick() {
        this._buildMarqueeFrustum();
        const entities1 = [];
        const visitNode = (node, intersects = Frustum.INTERSECT) => {
            if (intersects === Frustum.INTERSECT) {
                intersects = frustumIntersectsAABB3(this._marqueeFrustum, node.aabb);
            }
            if (intersects === Frustum.OUTSIDE) {
                return;
            }
            if (node.entities) {
                const entities = node.entities;
                for (let i = 0, len = entities.length; i < len; i++) {
                    const entity = entities[i];
                    if (!entity.visible) {
                        continue;
                    }
                    const entityAABB = entity.aabb;
                    if (this._marqueeDir === LEFT_TO_RIGHT) {
                        // Select entities that are completely inside marquee
                        const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
                        if (intersection === Frustum.INSIDE) {
                            entities1.push(entity);
                        }
                    } else {
                        // Select entities that are partially inside marquee
                        const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
                        if (intersection !== Frustum.OUTSIDE) {
                            entities1.push(entity);
                        }
                    }
                }
            }
            //    }
            if (node.left) {
                visitNode(node.left, intersects);
            }
            if (node.right) {
                visitNode(node.right, intersects);
            }
        }
        visitNode(this._objectsKdTree3.root);
        for (let i = 0, len = entities1.length; i < len; i++) {
            entities1[i].selected = true;
        }
        return entities1;
    }

    _buildMarqueeFrustum() { // https://github.com/xeokit/xeokit-sdk/issues/869#issuecomment-1165375770
        const canvas = this.viewer.scene.canvas.canvas;
        const canvasWidth = canvas.clientWidth;
        const canvasHeight = canvas.clientHeight;
        const xCanvasToClip = 2.0 / canvasWidth;
        const yCanvasToClip = 2.0 / canvasHeight;
        const NEAR_SCALING = 17;
        const ratio = canvas.clientHeight / canvas.clientWidth;
        const FAR_PLANE = 10000;
        const left = this._marquee[0] * xCanvasToClip + -1;
        const right = this._marquee[2] * xCanvasToClip + -1;
        const bottom = -this._marquee[3] * yCanvasToClip + 1;
        const top = -this._marquee[1] * yCanvasToClip + 1;
        const near = this.viewer.scene.camera.frustum.near * (NEAR_SCALING * ratio);
        const far = FAR_PLANE;
        math.frustumMat4(
            left,
            right,
            bottom * ratio,
            top * ratio,
            near,
            far,
            this._marqueeFrustumProjMat,
        );
        setFrustum(this._marqueeFrustum, this.viewer.scene.camera.viewMatrix, this._marqueeFrustumProjMat);
    }
}
