import getPathPrefix from "../../utils/getPathPrefix";

function GameObjectLayers({
    gameObjects,
    doneObjectIds,
    hoveredObjectId,
    onSelect,
    onMouseEnter,
    onMouseLeave,
}) {
    return Object.entries(gameObjects).map(([objectKey, object]) => {
        if (!object.position || !object.status) return null;

        const sizeWidth = object.size?.width ?? 0;
        const sizeHeight = object.size?.height ?? 0;
        const style = {
            left: `${(object.position.x / 1920) * 100}%`,
            top: `${(object.position.y / 1080) * 100}%`,
            width: `${(sizeWidth / 1920) * 100}%`,
            height: `${(sizeHeight / 1080) * 100}%`,
        };

        if (object.interactive === false) {
            return (
                <div
                    key={objectKey}
                    className={`decor-layer decor-${object.id}`}
                    style={style}
                >
                    <img
                        className="default"
                        src={getPathPrefix(object.status.default)}
                        alt=""
                    />
                </div>
            );
        }

        const isDone = doneObjectIds.has(object.id);
        if (object.visibilityMode === "whenDone" && !isDone) return null;
        if (object.visibilityMode === "whenNotDone" && isDone) return null;

        const isHover = hoveredObjectId === object.id;
        const stateClasses = `${isDone ? " done" : ""}${isHover ? " hover" : ""}`;

        return (
            <button
                key={objectKey}
                type="button"
                className={`layer layer-${object.id} object-layer${stateClasses}`}
                style={style}
                onClick={() => onSelect(object.id)}
                onMouseEnter={() => onMouseEnter(object.id)}
                onMouseLeave={onMouseLeave}
            >
                <img
                    className="default"
                    src={getPathPrefix(object.status.default)}
                    alt=""
                />
                <img
                    className="done"
                    src={getPathPrefix(object.status.done ?? object.status.default)}
                    alt=""
                />
            </button>
        );
    });
}

export default GameObjectLayers;
