// // @ts-nocheck

// import { randomFromArray } from "../utils/array.js";
// import { createButtonElement, createHeader, createSelect } from "../utils/dom.js";
// import { tableElement } from "../utils/elements.js";
// import { serdeMetrics, serdeString } from "../utils/serde.js";
// import { resetParams } from "../utils/url.js";

// export function init() {
//   tableElement.innerHTML = "wip, will hopefuly be back soon, sorry !";

//   // const parent = tableElement;
//   // const { headerElement } = createHeader("Table");
//   // parent.append(headerElement);

//   // const div = window.document.createElement("div");
//   // parent.append(div);

//   // const table = createTable({
//   //   signals,
//   //   brk,
//   //   resources,
//   //   option,
//   // });
//   // div.append(table.element);

//   // const span = window.document.createElement("span");
//   // span.innerHTML = "Add column";
//   // div.append(
//   //   createButtonElement({
//   //     onClick: () => {
//   //       table.addRandomCol?.();
//   //     },
//   //     inside: span,
//   //     title: "Click or tap to add a column to the table",
//   //   }),
//   // );
// }

// // /**
// //  * @param {Object} args
// //  * @param {Option} args.option
// //  * @param {Signals} args.signals
// //  * @param {BrkClient} args.brk
// //  * @param {Resources} args.resources
// //  */
// // function createTable({ brk, signals, option, resources }) {
// //   const indexToMetrics = createIndexToMetrics(metricToIndexes);

// //   const serializedIndexes = createSerializedIndexes();
// //   /** @type {SerializedIndex} */
// //   const defaultSerializedIndex = "height";
// //   const serializedIndex = /** @type {Signal<SerializedIndex>} */ (
// //     signals.createSignal(
// //       /** @type {SerializedIndex} */ (defaultSerializedIndex),
// //       {
// //         save: {
// //           ...serdeString,
// //           keyPrefix: "table",
// //           key: "index",
// //         },
// //       },
// //     )
// //   );
// //   const index = signals.createMemo(() =>
// //     serializedIndexToIndex(serializedIndex()),
// //   );

// //   const table = window.document.createElement("table");
// //   const obj = {
// //     element: table,
// //     /** @type {VoidFunction | undefined} */
// //     addRandomCol: undefined,
// //   };

// //   signals.createEffect(index, (index, prevIndex) => {
// //     if (prevIndex !== undefined) {
// //       resetParams(option);
// //     }

// //     const possibleMetrics = indexToMetrics[index];

// //     const columns = signals.createSignal(/** @type {Metric[]} */ ([]), {
// //       equals: false,
// //       save: {
// //         ...serdeMetrics,
// //         keyPrefix: `table-${serializedIndex()}`,
// //         key: `columns`,
// //       },
// //     });
// //     columns.set((l) => l.filter((id) => possibleMetrics.includes(id)));

// //     signals.createEffect(columns, (columns) => {
// //       console.log(columns);
// //     });

// //     table.innerHTML = "";
// //     const thead = window.document.createElement("thead");
// //     table.append(thead);
// //     const trHead = window.document.createElement("tr");
// //     thead.append(trHead);
// //     const tbody = window.document.createElement("tbody");
// //     table.append(tbody);

// //     const rowElements = signals.createSignal(
// //       /** @type {HTMLTableRowElement[]} */ ([]),
// //     );

// //     /**
// //      * @param {Object} args
// //      * @param {HTMLSelectElement} args.select
// //      * @param {Unit} [args.unit]
// //      * @param {(event: MouseEvent) => void} [args.onLeft]
// //      * @param {(event: MouseEvent) => void} [args.onRight]
// //      * @param {(event: MouseEvent) => void} [args.onRemove]
// //      */
// //     function addThCol({ select, onLeft, onRight, onRemove, unit: _unit }) {
// //       const th = window.document.createElement("th");
// //       th.scope = "col";
// //       trHead.append(th);
// //       const div = window.document.createElement("div");
// //       div.append(select);
// //       // const top = window.document.createElement("div");
// //       // div.append(top);
// //       // top.append(select);
// //       // top.append(
// //       //   createAnchorElement({
// //       //     href: "",
// //       //     blank: true,
// //       //   }),
// //       // );
// //       const bottom = window.document.createElement("div");
// //       const unit = window.document.createElement("span");
// //       if (_unit) {
// //         unit.innerHTML = _unit;
// //       }
// //       const moveLeft = createButtonElement({
// //         inside: "←",
// //         title: "Move column to the left",
// //         onClick: onLeft || (() => {}),
// //       });
// //       const moveRight = createButtonElement({
// //         inside: "→",
// //         title: "Move column to the right",
// //         onClick: onRight || (() => {}),
// //       });
// //       const remove = createButtonElement({
// //         inside: "×",
// //         title: "Remove column",
// //         onClick: onRemove || (() => {}),
// //       });
// //       bottom.append(unit);
// //       bottom.append(moveLeft);
// //       bottom.append(moveRight);
// //       bottom.append(remove);
// //       div.append(bottom);
// //       th.append(div);
// //       return {
// //         element: th,
// //         /**
// //          * @param {Unit} _unit
// //          */
// //         setUnit(_unit) {
// //           unit.innerHTML = _unit;
// //         },
// //       };
// //     }

// //     addThCol({
// //       ...createSelect({
// //         list: serializedIndexes,
// //         signal: serializedIndex,
// //       }),
// //       unit: "index",
// //     });

// //     let from = 0;
// //     let to = 0;

// //     resources
// //       .getOrCreate(index, serializedIndex())
// //       .fetch()
// //       .then((vec) => {
// //         if (!vec) return;
// //         from = /** @type {number} */ (vec[0]);
// //         to = /** @type {number} */ (vec.at(-1)) + 1;
// //         const trs = /** @type {HTMLTableRowElement[]} */ ([]);
// //         for (let i = vec.length - 1; i >= 0; i--) {
// //           const value = vec[i];
// //           const tr = window.document.createElement("tr");
// //           trs.push(tr);
// //           tbody.append(tr);
// //           const th = window.document.createElement("th");
// //           th.innerHTML = serializeValue({
// //             value,
// //             unit: "index",
// //           });
// //           th.scope = "row";
// //           tr.append(th);
// //         }
// //         rowElements.set(() => trs);
// //       });

// //     const owner = signals.getOwner();

// //     /**
// //      * @param {Metric} metric
// //      * @param {number} [_colIndex]
// //      */
// //     function addCol(metric, _colIndex = columns().length) {
// //       signals.runWithOwner(owner, () => {
// //         /** @type {VoidFunction | undefined} */
// //         let dispose;
// //         signals.createRoot((_dispose) => {
// //           dispose = _dispose;

// //           const metricOption = signals.createSignal({
// //             name: metric,
// //             value: metric,
// //           });
// //           const { select } = createSelect({
// //             list: possibleMetrics.map((metric) => ({
// //               name: metric,
// //               value: metric,
// //             })),
// //             signal: metricOption,
// //           });

// //           signals.createEffect(metricOption, (metricOption) => {
// //             select.style.width = `${21 + 7.25 * metricOption.name.length}px`;
// //           });

// //           if (_colIndex === columns().length) {
// //             columns.set((l) => {
// //               l.push(metric);
// //               return l;
// //             });
// //           }

// //           const colIndex = signals.createSignal(_colIndex);

// //           /**
// //            * @param {boolean} right
// //            * @returns {(event: MouseEvent) => void}
// //            */
// //           function createMoveColumnFunction(right) {
// //             return () => {
// //               const oldColIndex = colIndex();
// //               const newColIndex = oldColIndex + (right ? 1 : -1);

// //               const currentTh = /** @type {HTMLTableCellElement} */ (
// //                 trHead.childNodes[oldColIndex + 1]
// //               );
// //               const oterTh = /** @type {HTMLTableCellElement} */ (
// //                 trHead.childNodes[newColIndex + 1]
// //               );

// //               if (right) {
// //                 oterTh.after(currentTh);
// //               } else {
// //                 oterTh.before(currentTh);
// //               }

// //               columns.set((l) => {
// //                 [l[oldColIndex], l[newColIndex]] = [
// //                   l[newColIndex],
// //                   l[oldColIndex],
// //                 ];
// //                 return l;
// //               });

// //               const rows = rowElements();
// //               for (let i = 0; i < rows.length; i++) {
// //                 const element = rows[i].childNodes[oldColIndex + 1];
// //                 const sibling = rows[i].childNodes[newColIndex + 1];
// //                 const temp = element.textContent;
// //                 element.textContent = sibling.textContent;
// //                 sibling.textContent = temp;
// //               }
// //             };
// //           }

// //           const th = addThCol({
// //             select,
// //             unit: serdeUnit.deserialize(metric),
// //             onLeft: createMoveColumnFunction(false),
// //             onRight: createMoveColumnFunction(true),
// //             onRemove: () => {
// //               const ci = colIndex();
// //               trHead.childNodes[ci + 1].remove();
// //               columns.set((l) => {
// //                 l.splice(ci, 1);
// //                 return l;
// //               });
// //               const rows = rowElements();
// //               for (let i = 0; i < rows.length; i++) {
// //                 rows[i].childNodes[ci + 1].remove();
// //               }
// //               dispose?.();
// //             },
// //           });

// //           signals.createEffect(columns, () => {
// //             colIndex.set(Array.from(trHead.children).indexOf(th.element) - 1);
// //           });

// //           console.log(colIndex());

// //           signals.createEffect(rowElements, (rowElements) => {
// //             if (!rowElements.length) return;
// //             for (let i = 0; i < rowElements.length; i++) {
// //               const td = window.document.createElement("td");
// //               rowElements[i].append(td);
// //             }

// //             signals.createEffect(
// //               () => metricOption().name,
// //               (metric, prevMetric) => {
// //                 const unit = serdeUnit.deserialize(metric);
// //                 th.setUnit(unit);

// //                 const vec = resources.getOrCreate(index, metric);

// //                 vec.fetch({ from, to });

// //                 const fetchedKey = resources.genFetchedKey({ from, to });

// //                 columns.set((l) => {
// //                   const i = l.indexOf(prevMetric ?? metric);
// //                   if (i === -1) {
// //                     l.push(metric);
// //                   } else {
// //                     l[i] = metric;
// //                   }
// //                   return l;
// //                 });

// //                 signals.createEffect(
// //                   () => vec.fetched().get(fetchedKey)?.vec(),
// //                   (vec) => {
// //                     if (!vec?.length) return;

// //                     const thIndex = colIndex() + 1;

// //                     for (let i = 0; i < rowElements.length; i++) {
// //                       const iRev = vec.length - 1 - i;
// //                       const value = vec[iRev];
// //                       // @ts-ignore
// //                       rowElements[i].childNodes[thIndex].innerHTML =
// //                         serializeValue({
// //                           value,
// //                           unit,
// //                         });
// //                     }
// //                   },
// //                 );

// //                 return () => metric;
// //               },
// //             );
// //           });
// //         });

// //         signals.onCleanup(() => {
// //           dispose?.();
// //         });
// //       });
// //     }

// //     columns().forEach((metric, colIndex) => addCol(metric, colIndex));

// //     obj.addRandomCol = function () {
// //       addCol(randomFromArray(possibleMetrics));
// //     };

// //     return () => index;
// //   });

// //   return obj;
// // }

// /**
//  * @param {MetricToIndexes} metricToIndexes
//  */
// function createIndexToMetrics(metricToIndexes) {
//   // const indexToMetrics = Object.entries(metricToIndexes).reduce(
//   //   (arr, [_id, indexes]) => {
//   //     const id = /** @type {Metric} */ (_id);
//   //     indexes.forEach((i) => {
//   //       arr[i] ??= [];
//   //       arr[i].push(id);
//   //     });
//   //     return arr;
//   //   },
//   //   /** @type {Metric[][]} */ (Array.from({ length: 24 })),
//   // );
//   // indexToMetrics.forEach((arr) => {
//   //   arr.sort();
//   // });
//   // return indexToMetrics;
// }

// /**
//  * @param {Object} args
//  * @param {number | string | Object | Array<any>} args.value
//  * @param {Unit} args.unit
//  */
// function serializeValue({ value, unit }) {
//   const t = typeof value;
//   if (value === null) {
//     return "null";
//   } else if (typeof value === "string") {
//     return value;
//   } else if (t !== "number") {
//     return JSON.stringify(value).replaceAll('"', "").slice(1, -1);
//   } else if (value !== 18446744073709552000) {
//     if (unit === "usd" || unit === "difficulty" || unit === "sat/vb") {
//       return value.toLocaleString("en-us", {
//         minimumFractionDigits: 2,
//         maximumFractionDigits: 2,
//       });
//     } else if (unit === "btc") {
//       return value.toLocaleString("en-us", {
//         minimumFractionDigits: 8,
//         maximumFractionDigits: 8,
//       });
//     } else {
//       return value.toLocaleString("en-us");
//     }
//   } else {
//     return "";
//   }
// }