import {
  Handle,
  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 useFlowStore from '../VisProgStores';

/**
 * 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 desciption: description of the goal
 * @param hasReduce: whether this node has reducing functionality (true by default)
 */
export type GoalNodeData = {
  label: string;
  description: string;
  droppable: boolean;
  achieved: boolean;
  hasReduce: boolean;
};

export type GoalNode = Node<GoalNodeData>


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

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

  const setDescription = (value: string) => {
    updateNodeData(props.id, {...data, description: value});
  }

  const setAchieved = (value: boolean) => {
    updateNodeData(props.id, {...data, achieved: value});
  }

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
      <div className={"flex-row gap-md"}>
        <label htmlFor={text_input_id}>Goal:</label>
        <TextField
          id={text_input_id}
          value={data.description}
          setValue={(val) => setDescription(val)}
          placeholder={"To ..."}
        />
      </div>
      <div className={"flex-row gap-md align-center"}>
        <label htmlFor={checkbox_id}>Achieved:</label>
        <input
          id={checkbox_id}
          type={"checkbox"}
          value={data.achieved ? "checked" : ""}
          onChange={(e) => setAchieved(e.target.checked)}
        />
      </div>
      <Handle type="source" position={Position.Right} id="GoalSource"/>
    </div>
  </>;
}


/**
 * Reduces each Goal, 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 GoalReduce(node: Node, nodes: Node[]) {
  // Replace this for nodes functionality
  if (nodes.length <= -1) { 
    console.warn("Impossible nodes length in GoalReduce") 
  } 
  const data = node.data as GoalNodeData;
    return {
      id: node.id,
      label: data.label,
      description: data.description,
      achieved: data.achieved,
    }
}

export function GoalConnects(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")
  }
}