import {
  NodeToolbar} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import styles from '../../VisProg.module.css';
import useFlowStore from "../VisProgStores.tsx";

//Toolbar definitions
type ToolbarProps = {
  nodeId: string;
  allowDelete: boolean;
};

/**
 * Node Toolbar definition:
 * handles: node deleting functionality
 * can be added to any custom node component as a React component
 *
 * @param {string} nodeId
 * @param {boolean} allowDelete
 * @returns {React.JSX.Element}
 * @constructor
 */
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
  const {deleteNode} = useFlowStore();

  const deleteParentNode = ()=> {
    deleteNode(nodeId);
  }
  return (
    <NodeToolbar>
      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
    </NodeToolbar>);
}

// Renaming component
/**
 * Adds a component that can be used to edit a node's label entry inside its Data
 * can be added to any custom node that has a label inside its Data
 *
 * @param {string} nodeLabel
 * @param {string} nodeId
 * @returns {React.JSX.Element}
 * @constructor
 */
export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
  const {updateNodeData} = useFlowStore();

  const updateData  = (event: React.FocusEvent<HTMLInputElement>) => {
    const input = event.target.value;
    updateNodeData(nodeId, {label: input});
    event.currentTarget.setAttribute("readOnly", "true");
    window.getSelection()?.empty();
    event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
  };

  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };

  const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
    if(event.currentTarget.hasAttribute("readOnly")) {
      event.currentTarget.removeAttribute("readOnly"); // enable editing
      event.currentTarget.select(); // select the text input
      window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
      event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
    }
  }

  return (
    <div className={styles.NodeTextBar }>
      <label>name: </label>
      <input
        className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
        type={"text"}
        defaultValue={nodeLabel}
        onKeyDown={updateOnEnter}
        onBlur={updateData}
        onClick={enableEditing}
        maxLength={25}
        readOnly
      />
    </div>
  )
}