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

// Contains the datatypes for the data inside our NodeTypes
// this has to be improved or adapted to suit our implementation for computing the graph
// into a format that is useful for the Control Backend

type defaultNodeData = {
  label: string;
};

type startNodeData = defaultNodeData;
type endNodeData = defaultNodeData;
type normNodeData = defaultNodeData;
type phaseNodeData = defaultNodeData & {
  number: number;
};

export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;

// Node Toolbar definition, contains node delete functionality

type ToolbarProps = {
  nodeId: string;
  allowDelete: boolean;
};

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>);
}


// Definitions of Nodes

// Start Node definition:

type StartNodeProps = {
  id: string;
  data: startNodeData;
};

export const StartNode = ({id, data}: StartNodeProps) => {
  return (
    <>
      <Toolbar nodeId={id} allowDelete={false}/>
      <div className={styles.defaultNodeStart}>
        <div> data test {data.label} </div>
        <Handle type="source" position={Position.Right} id="start"/>
      </div>
    </>
  );
};


// End node definition:

type EndNodeProps = {
  id: string;
  data: endNodeData;
};

export const EndNode = ({id, data}: EndNodeProps) => {
  return (
    <>
      <Toolbar nodeId={id} allowDelete={false}/>
      <div className={styles.defaultNodeEnd}>
        <div> {data.label} </div>
        <Handle type="target" position={Position.Left} id="end"/>
      </div>
    </>
  );
};


// Phase node definition:

type PhaseNodeProps = {
  id: string;
  data: phaseNodeData;
};

export const PhaseNode = ({id, data}: PhaseNodeProps) => {
  return (
    <>
      <Toolbar nodeId={id} allowDelete={true}/>
      <div className={styles.defaultNodePhase}>
        <div> phase {data.number} {data.label} </div>
        <Handle type="target" position={Position.Left} id="target"/>
        <Handle type="target" position={Position.Bottom} id="norms"/>
        <Handle type="source" position={Position.Right} id="source"/>
      </div>
    </>
  );
};


// Norm node definition:

type NormNodeProps = {
  id: string;
  data: normNodeData;
};

export const NormNode = ({id, data}: NormNodeProps) => {
  return (
    <>
      <Toolbar nodeId={id} allowDelete={true}/>
      <div className={styles.defaultNodeNorm}>
        <div> Norm {data.label} </div>
        <Handle type="source" position={Position.Right} id="NormSource"/>
      </div>
    </>
  );
};