import {
  CaretVDOMComponentProps,
  createCaretVDOMComponent,
  h,
  t,
  VNode,
} from "@caret-js/core";
import { matrixTokenType } from "../tokens/matrix";

export const MatrixTokenComponent = createCaretVDOMComponent<
  typeof matrixTokenType
>(
  <C>({
    token,
    children,
  }: CaretVDOMComponentProps<typeof matrixTokenType, C>) => {
    const { rows, cols, style } = token.props;

    let rowsHTML: VNode<C>[] = [];
    for (let r = 0; r < rows; r++) {
      let rowCellsHTML: VNode<C>[] = [];
      for (let c = 0; c < cols; c++) {
        rowCellsHTML.push(h("td", {}, children.get(`${r}-${c}`)));
      }
      rowsHTML.push(h("tr", {}, ...rowCellsHTML));
    }

    return h(
      "table",
      { class: `matrix matrix-${style}` },
      h("tbody", {}, ...rowsHTML),
    );
  },
);