import React, { useContext } from 'react';
import { Handle, Position } from 'reactflow';
import { WorkflowContext } from './App'; // Import context from App.js
import './RunNode.css';

const RunNode = ({ data, isConnectable, id }) => {
  const { handleRunFromNode, isRunning } = useContext(WorkflowContext); // Get the specific run function and running state

  // Run only this specific workflow branch
  const runThisWorkflow = () => {
    handleRunFromNode(id);
  };

  return (
    <div className="run-node">
      <div className="run-node-header">
        <strong>Run Workflow</strong>
      </div>
      <div className="run-node-content">
        <p>Connect this node to the start of your flow and click the button to begin.</p>
        <button 
          onClick={runThisWorkflow} 
          className="run-button"
          disabled={isRunning}
        >
          {isRunning ? '⏳ Running...' : '▶ Run Flow'}
        </button>
      </div>
      <Handle
        type="source"
        position={Position.Right}
        id="source-trigger"
        isConnectable={isConnectable}
      />
    </div>
  );
};

export default RunNode;