import {
    isInRegion,
    getRelativeRegionCoordinates,
    getAbsoluteRegionCoordinates
} from "./helpers.js";

export class EventHandler {
    constructor(element) {
        this.element = element;

        this.listeners = [];

        this.element.addEventListener('mousemove', e => {
            const {
                x,
                y,
                relX,
                relY,
            } = this.getCoordinates(e.clientX, e.clientY);

            this.listeners.filter(l => l.event === 'hover' && isInRegion(relX, relY, l.region)).forEach(l => {
                const coords = getAbsoluteRegionCoordinates(x, y, l.region, this.element.width, this.element.height);
                const relCoords = getRelativeRegionCoordinates(relX, relY, l.region);
                const event = {
                    x: coords.x,
                    y: coords.y,
                    relX: relCoords.x,
                    relY: relCoords.y,
                    event: e,
                };
                l.callback(event);
            });
        });

        this.element.addEventListener('click', e => {
            const event = {
                x: e.clientX - this.element.offsetLeft,
                y: e.clientY - this.element.offsetTop,
                event: e,
            };
            this.listeners.filter(l => l.event === 'click').forEach(listener => listener.callback(event));
        });
    }

    getCoordinates(x, y) {
        return {
            x: x - this.element.offsetLeft,
            y: y - this.element.offsetTop,
            relX: (x - this.element.offsetLeft) / this.element.clientWidth,
            relY: (y - this.element.offsetTop) / this.element.clientHeight,
        };
    }

    on(type, callback, x = 0, y = 0, width = 1, height = 1) {
        this.listeners.push({
            event: type,
            region: {
                x,
                y,
                width,
                height
            },
            callback: callback,
        });
    }
}