import React from "react";
import { render } from "react-dom";

import DnDFlow from "react-dnd-diagrams";

const Categories = {
  SHAPES: "Shapes",
  STRUCTURES: "Other",
};

const parentNodes = ["Table", "LineChart"];

const ShapesData = {
  Square: {
    image: (
      <rect
        x="0.5"
        y="0.5"
        width="25"
        height="25"
        vectorEffect="non-scaling-stroke"
      />
    ),
    viewBox: "0 0 26 26",
    category: [Categories.SHAPES],
    keepAspectRatio: false,
  },
  Table: {
    image: (
      <>
        <g>
          <path d="M245.9,5.2v89.7H4.7V5.2H245.9 M246.9,4.2H3.7v91.7h243.1V4.2L246.9,4.2z" />
        </g>
        <g>
          <line class="st0" x1="59.5" y1="4.8" x2="59.5" y2="95" />
        </g>
        <g>
          <line class="st0" x1="158" y1="4.8" x2="158" y2="95" />
        </g>
        <line class="st0" x1="4.6" y1="21.2" x2="246.4" y2="21.2" />
      </>
    ),
    viewBox: "0 0 251 101",
    size: { width: 100, height: 100 },
    keepAspectRatio: false,
    hideTextInput: true,
    hideShape: true,
    category: [Categories.STRUCTURES],
  },
};

const App = (props) => {
  return (
    <div>
      <DnDFlow
        categories={Categories}
        parentNodes={parentNodes}
        shapesData={ShapesData}
        DrawingContent={null}
        saveDiagram={(data) => {
          console.log(data);
        }}
      />
    </div>
  );
};

render(<App />, document.getElementById("app"));