import {fill_chart} from "./chart_functions.js";
import {register_dropdowns} from "./dropdowns.js";
import {
    open_new_transaction_pane
    , close_new_transaction_pane
    , add_new_breakdown
    , register_breakdown_handlers
} from "./new_transactions.js";


function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

/*
 * Change highlighted navbar element
 * @param {MouseEvent}
 */
function switch_nav(event) {
    console.log(`It is a: ${event}`);
    var active_anchor = document.querySelector("nav a.active");
    active_anchor.classList.remove("active");

    var clicked = event.target;
    clicked.classList.add("active");
}

/** @type {boolean} */
var drafts_is_open = false;
/*
    * toggle the new transaction pane
*/
function toggle_drafts() {
    if (drafts_is_open) {
        close_new_transaction_pane();
        drafts_is_open = false;
    } else {
        open_new_transaction_pane();
        drafts_is_open = true;
    }
}
function close_drafts() {
    close_new_transaction_pane();
    drafts_is_open = false;
}
const open_drafts = debounce(toggle_drafts);


function register_handlers() {
    var navAnchors = document.querySelectorAll("nav a");
    navAnchors.forEach(function (a_el) {
        a_el.removeEventListener("click", switch_nav);
        a_el.addEventListener("click", switch_nav);
    });
    register_dropdowns();
    register_breakdown_handlers();
    document.querySelector("#open-draft").addEventListener("click", open_drafts);
    document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
    document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
        event.target.parentNode.dataset.value = event.target.value
    });
    document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
    close_new_transaction_pane();
}

function load_in_table() {
    var rows = Array.from(document.querySelectorAll(".row_awaiting_processing"));
    rows.sort((a, b) => b.dataset.rcntTransactionRowPos - a.dataset.rcntTransactionRowPos);

    const processElement = (element, index) => {
        element.classList.remove('row_awaiting_processing');
        setTimeout(() => {
            if (index < rows.length - 1) {
                processElement(rows[index + 1], index + 1);
            }
        }, 25);
    };

    processElement(rows[0], 0);
}

const trigger_table_animation = debounce(load_in_table, 100);
const trigger_reset_handlers = debounce(register_handlers, 200);

export {trigger_reset_handlers, trigger_table_animation, fill_chart, close_drafts};