import {
  Handle,
  type NodeProps,
  Position,
  type Node,
} from '@xyflow/react';
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css'; 

/**
 * The typing of this node's data
 */
export type EndNodeData = {
  label: string;
  droppable: boolean;
  hasReduce: boolean;
};

export type EndNode = Node<EndNodeData>

/**
 * Default function to render an end node given its properties
 * @param props the node's properties
 * @returns React.JSX.Element
 */
export default function EndNode(props: NodeProps<EndNode>) {
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={false}/>
      <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
        <div className={"flex-row gap-sm"}>
        End
        </div>
        <Handle type="target" position={Position.Left} id="target"/>
      </div>
    </>
  );
}

/**
 * Functionality for reducing this node into its more compact json program
 * @param node the node to reduce
 * @param _nodes all nodes present
 * @returns Dictionary, {id: node.id}
 */
export function EndReduce(node: Node, _nodes: Node[]) {
  // Replace this for nodes functionality
  return {
    id: node.id
  }
}

/**
 * Any connection functionality that should get called when a connection is made to this node type (end)
 * @param _thisNode the node of which the functionality gets called
 * @param _otherNode the other node which has connected
 * @param _isThisSource whether this node is the one that is the source of the connection
 */
export function EndConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
}