// Made with LUME
// http://github.com/lume/lume

// Defines the LUME elements with their default names.
LUME.useDefaultNames();

const buttonHeight = 10;

new Vue({
    el: "#root",
    template: document.querySelector("[vue]").innerHTML,
    data: () => ({
        buttonHeight
    }),
    mounted() {
        const { Motor, Events } = LUME;
        const scene = document.querySelector("#scene");
        const lightContainer = document.querySelector("#lightContainer");
        const light = document.querySelector("#light");

        light.on(Events.GL_LOAD, async () => {
            light.three.shadow.radius = 2;
            light.three.distance = 800;
            light.three.shadow.bias = -0.001;
            light.needsUpdate();
        });

        // TODO this stuff should be doable via the HTML. But when needed, Three.js
        // object can be manipulated directly.
        Array.from(document.querySelectorAll("lume-mixed-plane")).forEach((n) => {
            n.on(Events.GL_LOAD, async () => {
                n.three.material.opacity = 0.3;
                n.needsUpdate();
            });
        });

        const bg = document.querySelector("#bg");

        bg.on(Events.GL_LOAD, async () => {
            bg.three.material.opacity = 0.3;
            bg.three.material.dithering = true;
            bg.needsUpdate();
        });

        const targetPosition = {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        };

        document.addEventListener("pointermove", (e) => {
            e.preventDefault();
            targetPosition.x = e.clientX;
            targetPosition.y = e.clientY;
        });

        Motor.addRenderTask((time) => {
            lightContainer.position.x +=
                (targetPosition.x - lightContainer.position.x) * 0.05;
            lightContainer.position.y +=
                (targetPosition.y - lightContainer.position.y) * 0.05;
            // light.position.x = 20 * Math.sin(time * 0.001);
            // light.position.y = 20 * Math.cos(time * 0.001);
        });

        let downTween, upTween, pressedButton;

        // On mouse down animate the button downward
        document.addEventListener("pointerdown", (e) => {
            if (is(e.target, "button")) {
                pressedButton = e.target;

                if (upTween) {
                    upTween.stop();
                    upTween = null;
                }

                downTween = new TWEEN.Tween(e.target.parentNode.position)
                    .to({ z: -this.buttonHeight }, 75)
                    .start()
                    .onComplete(() => {
                        downTween = null;
                    });

                Motor.addRenderTask((time) => {
                    if (!downTween) return false;
                    downTween.update(time);
                });
            }
        });

        // On mouse up animate the button upward
        document.addEventListener("pointerup", (e) => {
            if (pressedButton) {
                if (downTween) {
                    downTween.stop();
                    downTween = null;
                }

                upTween = new TWEEN.Tween(pressedButton.parentNode.position)
                    .to({ z: 0 }, 75)
                    .start()
                    .onComplete(() => {
                        upTween = null;
                    });

                Motor.addRenderTask((time) => {
                    if (!upTween) return false;
                    upTween.update(time);
                });
            }
        });
    }
});

function is(el, selector) {
    if ([].includes.call(document.querySelectorAll(selector), el)) return true;
    return false;
}