/**
   * Determines which items fit into a given maximum size.
   *
   * @param {Object} items - An object with keys and numerical values representing size. Size could be either height or width.
   * @param {number} size - The maximum allowed total size. Size could be either height or width.
   * @param {("start"|"end")} at - Which side to start hiding items from.
   *                               "end" (default) hides items from the end,
   *                               while "start" hides items from the beginning.
   * @returns {Object} An object with "visible" and "hidden" items.
   */
  function getOverflow(items, size, at = "end") {
    const itemEntries = Object.entries(items);
    let visible = {};
    let hidden = {};

    const entries = itemEntries.slice();
    if (at === "start") {
      // if overflowing from the start, accumulate from the end and iterate backwards
      let totalSize = 0;
      for (let i = entries.length - 1; i >= 0; i--) {
        const [key, itemSize] = entries[i];
        totalSize += itemSize;
        if (totalSize <= size) {
          visible[key] = itemSize;
        } else {
          hidden[key] = itemSize;
        }
      }
      // reverse both since we accumulated from the end
      visible = Object.fromEntries(Object.entries(visible).reverse());
      hidden = Object.fromEntries(Object.entries(hidden).reverse());
    } else {
      // default overflowing at end, accumulate from the beginning
      let totalSize = 0;
      for (const [key, itemSize] of itemEntries) {
        totalSize += itemSize;
        if (totalSize <= size) {
          visible[key] = itemSize;
        } else {
          hidden[key] = itemSize;
        }
      }
    }

    // TODO: one more prop `gap` to account for gap between items?
    // TODO: take more/overflow button size into account.
    // TODO: test if hidden items order is correct for horizontal and vertical start and end cases.
    // TODO: test ltr, rtl

    return { visible, hidden };
  }

  // example usage
  const items = {
    "id-1": 40,
    "id-2": 40,
    "id-3": 40,
    "id-4": 40,
    "id-5": 40,
    "id-6": 40,
    "id-7": 40,
    "id-8": 40,
    "id-9": 40,
    "id-10": 40,
  };

  const overflowDetailsEnd = getOverflow(items, 200);
  console.log("hide at end:\n", JSON.stringify(overflowDetailsEnd));
//   hide at end:
//  {"visible":{"id-1":40,"id-2":40,"id-3":40,"id-4":40,"id-5":40},"hidden":{"id-6":40,"id-7":40,"id-8":40,"id-9":40,"id-10":40}}

  const overflowDetailsStart = getOverflow(items, 200, "start");
  console.log("hide at start:\n", JSON.stringify(overflowDetailsStart));
//   hide at start:
//  {"visible":{"id-6":40,"id-7":40,"id-8":40,"id-9":40,"id-10":40},"hidden":{"id-1":40,"id-2":40,"id-3":40,"id-4":40,"id-5":40}}

  // export default getOverflow;