import { Node, mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react";
import { ChartBlockView, type ChartPoint, type ChartType } from "./chart-block-view";

const DEFAULT_DATA: ChartPoint[] = [
  { label: "Jan", value: 10 },
  { label: "Feb", value: 20 },
  { label: "Mar", value: 15 },
];

export const ChartBlock = Node.create({
  name: "chartBlock",
  group: "block",
  atom: true,
  draggable: true,

  addAttributes() {
    return {
      title: {
        default: "",
      },
      chartType: {
        default: "bar" as ChartType,
      },
      data: {
        default: DEFAULT_DATA,
      },
      // When set, the view computes `data` live from the user's own Mindavio
      // data (tasks, journal) instead of using the stored static `data` —
      // used by exclusive marketplace templates.
      dataSource: {
        default: null,
      },
    };
  },

  parseHTML() {
    return [{ tag: 'div[data-type="chart-block"]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "chart-block" })];
  },

  addNodeView() {
    return ReactNodeViewRenderer(ChartBlockView);
  },
});