// layout.ts
let leftPanel = null;
let rightPanel = null;
let dragBar = null;
let isDragging = false;
let pendingX = null;
export function initResize() {
    leftPanel = document.getElementById("leftPanel");
    rightPanel = document.getElementById("rightPanel");
    dragBar = document.getElementById("dragBar");
    if (!leftPanel || !rightPanel || !dragBar)
        return;
    const savedRatio = localStorage.getItem('layoutRatio');
    if (savedRatio) {
        applyRatio(parseFloat(savedRatio));
    }
    dragBar.addEventListener("mousedown", (e) => {
        if (rightPanel.classList.contains("hidden"))
            return;
        isDragging = true;
        document.body.style.cursor = "col-resize";
        e.preventDefault();
    });
    document.addEventListener("mouseup", () => {
        if (!isDragging)
            return;
        isDragging = false;
        document.body.style.cursor = "default";
        if (rightPanel && !rightPanel.classList.contains("hidden")) {
            const total = window.innerWidth;
            const leftWidth = leftPanel.getBoundingClientRect().width;
            localStorage.setItem('layoutRatio', String(leftWidth / total));
        }
    });
    document.addEventListener("mousemove", (e) => {
        if (!isDragging)
            return;
        if (rightPanel && rightPanel.classList.contains("hidden"))
            return;
        pendingX = e.clientX;
        requestAnimationFrame(() => {
            if (pendingX === null)
                return;
            if (!leftPanel || !rightPanel || !dragBar)
                return;
            const total = window.innerWidth;
            let leftWidth = pendingX;
            const min = 300;
            if (leftWidth < min)
                leftWidth = min;
            if (leftWidth > total - min)
                leftWidth = total - min;
            const rightWidth = total - leftWidth - dragBar.offsetWidth;
            leftPanel.style.flex = `0 0 ${leftWidth}px`;
            rightPanel.style.flex = `0 0 ${rightWidth}px`;
            pendingX = null;
        });
    });
}
function applyRatio(ratio) {
    const total = window.innerWidth;
    const leftWidth = Math.floor(total * ratio);
    const rightWidth = total - leftWidth;
    if (leftPanel && rightPanel) {
        leftPanel.style.flex = `0 0 ${leftWidth}px`;
        rightPanel.style.flex = `0 0 ${rightWidth}px`;
    }
}
export function updateResizerVisibility() {
    if (!dragBar || !rightPanel || !leftPanel)
        return;
    if (rightPanel.classList.contains("hidden")) {
        dragBar.classList.add("hidden");
        leftPanel.style.flex = "1";
    }
    else {
        dragBar.classList.remove("hidden");
    }
}