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

/**
 * 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 normList: 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;
  normList: string[];
  hasReduce: boolean;
};



export type NormNode = Node<NormNodeData>


export function NormNodeCanConnect(connection: Connection | Edge): boolean {
  return (connection != undefined);
}

/**
 * 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<Node>) {
  const label_input_id = `Norm_${props.id}_label_input`;
  const data = props.data as NormNodeData;
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={true}/>
      <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
        <div className={"flex-row gap-sm"}>
          <label htmlFor={label_input_id}></label>
          {props.data.label as string}
        </div>
        <div>
          <Norms id={props.id} list={data.normList}/>
        </div>
        
        <Handle type="target" position={Position.Right} id="phase"/>
      </div>
    </>
  );
}

/**
 * Reduces each Norm, including its children down into its relevant data.
 * @param props: The Node Properties of this node.
 */
export function NormReduce(node: Node, nodes: Node[]) {
  // Replace this for nodes functionality
  if (nodes.length <= -1) { 
    console.warn("Impossible nodes length in NormReduce") 
  } 
  const data = node.data as NormNodeData;
    return {
      label: data.label,
      list: data.normList,
    }
}

export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
  // Replace this for connection logic
  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
    console.warn("Impossible node connection called in EndConnects")
  }
}

function Norms(props: { id: string; list: string[] }) {
  const { id, list } = props;
  return (
    <>
      <span> The norms that the robot will uphold:</span>
      {
        list.map((norm, idx) => {
          return (
            <div key={`${id}_${idx}`} className={"flex-row gap-md"}>
              <TextField
                value={norm}
                setValue={() => { return; }}
              />
            </div>
          );
        })
      }
    </>
  );
}