import { NodeToolbar } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import useFlowStore from "../VisProgStores.tsx";

/**
 * Props for the Toolbar component.
 *
 * @property nodeId - The ID of the node this toolbar is attached to.
 * @property allowDelete - If `true`, the delete button is enabled; otherwise disabled.
 */
type ToolbarProps = {
  nodeId: string;
  allowDelete: boolean;
};

/**
 * Node Toolbar definition:
 * Handles: node deleting functionality
 * Can be integrated to any custom node component as a React component
 *
 * @param {string} nodeId - The ID of the node for which the toolbar is rendered.
 * @param {boolean} allowDelete - Enables or disables the delete functionality.
 * @returns {React.JSX.Element} A JSX element representing the toolbar.
 * @constructor
 */
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
  const {deleteNode} = useFlowStore();

  const deleteParentNode = ()=> {
    deleteNode(nodeId);
  }
  return (
    <NodeToolbar>
      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
    </NodeToolbar>);
}