import {
    computePosition,
    offset,
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';

const centerOffset = offset(({rects}) => {
    return -rects.reference.height / 2 - rects.floating.height / 2;
});

function open_new_transaction_pane() {
    let center = document.querySelector("#main-body-content");
    let new_tp = document.querySelector("#new-transaction-pane");

    new_tp.style.opacity = "1";

    let center_width = center.offsetWidth;
    center_width = center_width - (center_width / 10);
    new_tp.style.width = center_width + "px";

    computePosition(center, new_tp, {
        placement: "bottom",
        middleware: [
            centerOffset,
        ],
    }).then(({x, y}) => {
        Object.assign(new_tp.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    });
}

function close_new_transaction_pane() {
    let right_column = document.querySelector("#right-col");
    let new_tp = document.querySelector("#new-transaction-pane");
    new_tp.style.opacity = "0";
    computePosition(right_column, new_tp, {
        placement: "right",
        middleware: [
           offset(40),      
        ],
    }).then(({x, y}) => {
        Object.assign(new_tp.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    });

}

function add_new_breakdown() {
    let source = document.querySelector("#breakdown-template-row tr").cloneNode(true);
    source.style.removeProperty("display");
    console.log(source.querySelector("input[type='number']"));
    document.getElementById("breakdown-tbody").appendChild(source);
}

function update_breakdown_amount() {

}

export {open_new_transaction_pane, close_new_transaction_pane, add_new_breakdown}