import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";

import type { DiagramNode } from "../graph";

export function BpmnDataObjectNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const w = 40;
  const h = 50;
  const fold = 10;

  const bodyPath = `M0,0 L${w - fold},0 L${w},${fold} L${w},${h} L0,${h} Z`;
  const foldPath = `M${w - fold},0 L${w - fold},${fold} L${w},${fold}`;

  return (
    <div className="bpmn-data-object-node">
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
        <path
          d={bodyPath}
          fill="var(--node-bg)"
          style={{ stroke: "var(--bpmn-data-object)", strokeWidth: 1.5 }}
        />
        <path
          d={foldPath}
          fill="none"
          style={{ stroke: "var(--bpmn-data-object)", strokeWidth: 1.5 }}
        />
      </svg>
      {d.label && <div className="bpmn-event-label">{d.label}</div>}
      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        style={{ opacity: 0 }}
      />
      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        style={{ opacity: 0 }}
      />
    </div>
  );
}
