pepperplus-ui/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

// This program has been developed by students from the bachelor Computer Science at Utrecht
// University within the Software Project course.
// © Copyright Utrecht University (Department of Information and Computing Sciences)
import { useEffect } from "react";
import type { EditorWarning } from "../components/EditorWarnings.tsx";
import {
  type NodeProps,
  Position,
  type Node,
} from '@xyflow/react';
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
import { TextField } from '../../../../components/TextField';
import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
import useFlowStore from '../VisProgStores';
import {BeliefGlobalReduce} from "./BeliefGlobals.ts";

/**
 * The default data dot a phase node
 * @param label: the label of this phase
 * @param droppable: whether this node is droppable from the drop bar (initialized as true)
 * @param norm: list of strings of norms for this node
 * @param hasReduce: whether this node has reducing functionality (true by default)
 */
export type NormNodeData = {
  label: string;
  droppable: boolean;
  condition?: string; // id of this node's belief.
  norm: string;
  hasReduce: boolean;
  critical: boolean;
};

export type NormNode = Node<NormNodeData>

/**
 * Defines how a Norm node should be rendered
 * @param props NodeProps, like id, label, children
 * @returns React.JSX.Element
 */
export default function NormNode(props: NodeProps<NormNode>) {
  const data = props.data;
  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();

  const text_input_id = `norm_${props.id}_text_input`;
  const checkbox_id = `goal_${props.id}_checkbox`;

  const setValue = (value: string) => {
    updateNodeData(props.id, {norm: value});
  }

  const setCritical = (value: boolean) => {
    updateNodeData(props.id, {...data, critical: value});
  }
  useEffect(() => {
    const normText = data.norm || "";
    
    const startsWithNumberWarning: EditorWarning = {
      scope: { id: props.id },
      type: 'ELEMENT_STARTS_WITH_NUMBER',
      severity: 'ERROR',
      description: "Norms are not allowed to start with a number."
    };

    if (/^\d/.test(normText)) {
      registerWarning(startsWithNumberWarning);
    } else {
      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
    }
  }, [data.norm, props.id, registerWarning, unregisterWarning]);

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
      <div className={"flex-row gap-sm"}>
        <label htmlFor={text_input_id}>Norm :</label>
        <TextField
          id={text_input_id}
          value={data.norm}
          setValue={(val) => setValue(val)}
          placeholder={"Pepper should ..."}
        />
      </div>
      {/*There is no backend implementation yet of how critical norms would
      be treated differently than normal norms. The commented code below shows
      how you could add the UI side, if you wish to implement */}
      {/* <div className={"flex-row gap-md align-center"}>
        <label htmlFor={checkbox_id}>Critical:</label>
        <input
          id={checkbox_id}
          type={"checkbox"}
          checked={data.critical || false}
          onChange={(e) => setCritical(e.target.checked)}
        />
      </div> */}


      {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">
        <label htmlFor={checkbox_id}>Condition/ Belief attached.</label>
      </div>)}


      <MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
      ]} title="Connect to any number of phaseNode(-s)"/>
      <SingleConnectionHandle type="target" position={Position.Bottom} id="NormBeliefs" rules={[
        allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"])
      ]} title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"/>
    </div>
  </>;
};


/**
 * Reduces each Norm, including its children down into its relevant data.
 * @param node The Node Properties of this node.
 * @param nodes all the nodes in the graph
 */
export function NormReduce(node: Node, nodes: Node[]) {
  const data = node.data as NormNodeData;

  // conditions nodes - make sure to check for empty arrays
  const result: Record<string, unknown> = {
    id: node.id,
    label: data.label,
    norm: data.norm,
    critical: data.critical,
  };

  if (data.condition) {
    const conditionNode = nodes.find((node) => node.id === data.condition);
    // In case something went wrong, and our condition doesn't actually exist;
    if (conditionNode == undefined) return result;
    result["condition"] = BeliefGlobalReduce(conditionNode, nodes)
  }
  return result
}

export const NormTooltip = `
  A norm describes a behavioral rule Pepper must follow during the connected phase(-s),
  for example: "respond using formal language"`;

/**
 * This function is called whenever a connection is made with this node type as the target
 * @param _thisNode the node of this node type which function is called
 * @param _sourceNodeId the source of the received connection
 */
export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as NormNodeData;
  // If we got a belief connected, this is the condition for the norm.
  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && ['basic_belief', 'inferred_belief'].includes(node.type!)))) {
      data.condition = _sourceNodeId;
    }
}

/**
 * This function is called whenever a connection is made with this node type as the source
 * @param _thisNode the node of this node type which function is called
 * @param _targetNodeId the target of the created connection
 */
export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) {
  // no additional connection logic exists yet
}

/**
 * This function is called whenever a connection is disconnected with this node type as the target
 * @param _thisNode the node of this node type which function is called
 * @param _sourceNodeId the source of the disconnected connection
 */
export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as NormNodeData;
  // remove if the target of disconnection was our condition
  if (_sourceNodeId == data.condition) data.condition = undefined
}

/**
 * This function is called whenever a connection is disconnected with this node type as the source
 * @param _thisNode the node of this node type which function is called
 * @param _targetNodeId the target of the diconnected connection
 */
export function NormDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
  // no additional connection logic exists yet
}