///////////////////////////////////////////////////////////////////////////////
// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
// All rights reserved.
// 
// This software and its documentation and related materials are owned by
// the Alliance. The software may only be incorporated into application
// programs owned by members of the Alliance, subject to a signed
// Membership Agreement and Supplemental Software License Agreement with the
// Alliance. The structure and organization of this software are the valuable
// trade secrets of the Alliance and its suppliers. The software is also
// protected by copyright law and international treaty provisions. Application
// programs incorporating this software must include the following statement
// with their copyright notices:
// 
//   This application incorporates Open Design Alliance software pursuant to a
//   license agreement with Open Design Alliance.
//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
//   All rights reserved.
// 
// By use of this software, its documentation or related materials, you
// acknowledge and accept the above terms.
///////////////////////////////////////////////////////////////////////////////

import { components } from '@inweb/viewer-three';

const map = {
    B: 1,
    KB: 1 << 10,
    MB: 1 << 20,
    GB: 1 << 30,
};
function formatBytes(bytes) {
    if (!bytes)
        return "-";
    let unit;
    if (bytes >= map.GB)
        unit = "GB";
    else if (bytes >= map.MB)
        unit = "MB";
    else if (bytes >= map.KB)
        unit = "KB";
    else
        unit = "B";
    const value = bytes / map[unit];
    return value.toFixed() + " " + unit;
}
class Panel {
    constructor(label) {
        this.dom = document.createElement("div");
        this.label = document.createElement("div");
        this.label.style.padding = "0.25rem 0";
        this.label.style.fontWeight = "600";
        this.label.innerText = label;
        this.dom.appendChild(this.label);
        this.text = document.createElement("small");
        this.text.style.display = "block";
        this.text.style.padding = "0 0.5rem";
        this.dom.appendChild(this.text);
    }
    update(text) {
        if (this.text.innerText !== text)
            this.text.innerText = text;
    }
}
class InfoPanelComponent {
    constructor(viewer) {
        this.updateRenderInfo = () => {
            const info = this.viewer.info;
            const text = [];
            text.push(`FPS: ${info.performance.fps}`);
            text.push(`Frame Time: ${info.performance.frameTime} ms`);
            this.performancePanel.update(text.join("\n"));
            text.length = 0;
            text.push(`Viewport: ${info.render.viewport.width} x ${info.render.viewport.height}`);
            text.push(`Antialiasing: ${info.render.antialiasing}`);
            text.push(`Draw Calls: ${info.render.drawCalls}`);
            text.push(`Triangles: ${info.render.triangles}`);
            text.push(`Points: ${info.render.points}`);
            text.push(`Lines: ${info.render.lines}`);
            this.renderPanel.update(text.join("\n"));
        };
        this.updateSceneInfo = () => {
            const info = this.viewer.info;
            const text = [];
            text.push(`Objects: ${info.optimizedScene.objects}`);
            text.push(`Triangles: ${info.optimizedScene.triangles}`);
            text.push(`Points: ${info.optimizedScene.points}`);
            text.push(`Lines: ${info.optimizedScene.lines}`);
            text.push(`Edges: ${info.optimizedScene.edges}`);
            this.optimizedPanel.update(text.join("\n"));
            text.length = 0;
            text.push(`Objects: ${info.scene.objects}`);
            text.push(`Triangles: ${info.scene.triangles}`);
            text.push(`Points: ${info.scene.points}`);
            text.push(`Lines: ${info.scene.lines}`);
            text.push(`Edges: ${info.scene.edges}`);
            this.scenePanel.update(text.join("\n"));
            text.length = 0;
            text.push(`Geometries: ${info.memory.geometries}`);
            text.push(`Textures: ${info.memory.textures}`);
            text.push(`Materials: ${info.memory.materials}`);
            text.push(`GPU Used: ${formatBytes(info.memory.totalEstimatedGpuBytes)}`);
            text.push(`JS Heap Used: ${formatBytes(info.memory.usedJSHeapSize)}`);
            this.memoryPanel.update(text.join("\n"));
        };
        this.updateViewer = () => {
            this.viewer.update();
        };
        this.container = document.createElement("div");
        this.container.id = "info-container";
        this.container.style.position = "absolute";
        this.container.style.left = "0px";
        this.container.style.top = "0px";
        this.container.style.maxHeight = "100%";
        this.container.style.overflow = "auto";
        this.container.style.padding = "1rem";
        this.setTheme("dark");
        this.performancePanel = new Panel("Performance");
        this.renderPanel = new Panel("Render");
        this.optimizedPanel = new Panel("Optimized Scene");
        this.scenePanel = new Panel("Scene");
        this.memoryPanel = new Panel("Memory");
        this.container.appendChild(this.performancePanel.dom);
        this.container.appendChild(this.renderPanel.dom);
        this.container.appendChild(this.optimizedPanel.dom);
        this.container.appendChild(this.scenePanel.dom);
        this.container.appendChild(this.memoryPanel.dom);
        viewer.canvas.parentElement.appendChild(this.container);
        this.viewer = viewer;
        this.viewer.addEventListener("clear", this.updateSceneInfo);
        this.viewer.addEventListener("geometryend", this.updateSceneInfo);
        this.viewer.addEventListener("render", this.updateRenderInfo);
        this.viewer.addEventListener("animate", this.updateViewer);
        this.updateRenderInfo();
        this.updateSceneInfo();
    }
    dispose() {
        this.viewer.removeEventListener("clear", this.updateSceneInfo);
        this.viewer.removeEventListener("geometryend", this.updateSceneInfo);
        this.viewer.removeEventListener("render", this.updateRenderInfo);
        this.viewer.removeEventListener("animate", this.updateViewer);
        this.performancePanel = undefined;
        this.renderPanel = undefined;
        this.optimizedPanel = undefined;
        this.scenePanel = undefined;
        this.memoryPanel = undefined;
        this.container.remove();
        this.container = undefined;
    }
    setTheme(value) {
        if (value === "light") {
            this.container.style.background = "rgba(0, 0, 0, 0.025)";
            this.container.style.color = "#3d3d3d";
        }
        if (value === "dark") {
            this.container.style.background = "rgba(0, 0, 0, 0.88)";
            this.container.style.color = "#ebebeb";
        }
    }
}
components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));
//# sourceMappingURL=InfoPanelComponent.module.js.map
