import Diagram, { createSchema, useSchema } from "beautiful-react-diagrams";
import "beautiful-react-diagrams/styles.css";
import React from "react";
import Background from "./usb.png";

const CustomNode = (props) => {
  const { outputs } = props;

  return (
    <div
      style={{
        backgroundImage: "url(" + Background + ")",
        height: "100px",
        width: "100px",
        borderRadius: "30px",
        backgroundColor: "#FFF5CC",
      }}
    >
      <div style={{ padding: "10px", color: "white" }}></div>
      <div style={{ marginTop: "10px" }}>
        {outputs.map((port) =>
          React.cloneElement(port, {
            style: {
              width: "5px",
              height: "40px",
              background: "#1B263B",
              borderRadius: "0% 100% 100% 0%",
            },
          })
        )}
      </div>
    </div>
  );
};

const initialSchema = createSchema({
  nodes: [
    {
      id: 'node-1',
      content: 'Node 1',
      coordinates: [150, 60],
      outputs: [ { id: 'port-1', alignment: 'right' } ],
    },
    {
      id: "node-custom",
      coordinates: [350, 250],
      render: CustomNode,
      outputs: [{ id: 'img-port', alignment: 'right' }],
    },
  ],
});

const UncontrolledDiagram = () => {
  // create diagrams schema
  const [schema, { onChange }] = useSchema(initialSchema);

  return (
    <div style={{ height: "80rem" }}>
      <Diagram schema={schema} onChange={onChange} />
    </div>
  );
};

export default function App() {
  return (
    <div>
      <UncontrolledDiagram />
    </div>
  );
}