import React from "react";
import { Handle, Position } from "reactflow";
import { BaseNode, EmptyBaseNode } from "./Base";
// import { Handle, Position } from "react-flow-renderer";

import "./Style.scss";

const handleNodeClick = (props) => {
  const { data, id } = props;
  data.onNodeClickCallback(id);
};

const onCloseIconClick = (event, props) => {
  event.stopPropagation();
  const { data, id } = props;
  data.onDeleteNodeCallback(id);
};

export const Source = (props) => (
  <div className="NodeWrapper">
    <BaseNode
      {...props}
      onNodeClick={() => handleNodeClick(props)}
      onCloseIconClick={(event) => onCloseIconClick(event, props)}
    />
    <Handle type="source" position={Position.Bottom} className="NodePort" />
  </div>
);

export const Action = (props) => (
  <div className="NodeWrapper">
    <Handle type="target" position={Position.Top} className="NodePort" />
    <BaseNode
      {...props}
      onNodeClick={() => handleNodeClick(props)}
      onCloseIconClick={(event) => onCloseIconClick(event, props)}
    />
    <Handle type="source" position={Position.Bottom} className="NodePort" />
  </div>
);

export const Condition = (props) => (
  <div className="NodeWrapper">
    <Handle type="target" position={Position.Top} className="NodePort" />
    <BaseNode
      {...props}
      additionalClassName="ConditionNode"
      onNodeClick={() => handleNodeClick(props)}
      onCloseIconClick={(event) => onCloseIconClick(event, props)}
    />
    <Handle
      id="yes"
      type="source"
      position={Position.Bottom}
      style={{ bottom: 0, left: 45, background: "#555" }}
      className="NodePort"
    />
    <div
      style={{
        position: "absolute",
        left: 30,
        bottom: -9,
        background: "#000",
        color: "#fff",
        fontSize: 11,
        paddingLeft: 5,
        paddingRight: 5,
        paddingTop: 3,
        paddingBottom: 3,
        borderRadius: 5,
      }}
    >
      Yes
    </div>
    <Handle
      id="no"
      type="source"
      position={Position.Bottom}
      style={{ bottom: 0, left: 220, background: "#555" }}
      className="NodePort"
    />
    <div
      style={{
        position: "absolute",
        right: 25,
        bottom: -10,
        background: "#000",
        color: "#fff",
        paddingLeft: 5,
        paddingRight: 5,
        paddingTop: 3,
        paddingBottom: 3,
        fontSize: 11,
        borderRadius: 5,
      }}
    >
      No
    </div>
  </div>
);

export const End = (props) => (
  <div className="NodeWrapper">
    <Handle type="target" position={Position.Top} className="NodePort" />
    <BaseNode {...props} disabled={true} />
  </div>
);

export const Empty = (props) => (
  <div className="NodeWrapper">
    <Handle
      type="target"
      position={Position.Top}
      className="NodePort"
      // style={{ opacity: 0 }}
    />
    <EmptyBaseNode {...props} disabled={true} />
    <Handle
      type="source"
      position={Position.Bottom}
      className="NodePort"
      style={{ opacity: 0 }}
    />
  </div>
);
