import React, { memo } from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { FiBox, FiLayers, FiLock } from 'react-icons/fi';
import { t } from '../../utils/translation';
import { getComponentLabel } from '../../utils/componentUtils';
import NodeWrapper from './NodeWrapper';
import type { BaseNodeData } from '../../types/settings';

interface SubprocessNodeData extends BaseNodeData {
  subflowCount?: number;
}

const SubprocessNode = memo<NodeProps<SubprocessNodeData>>(({ data, selected }) => {
  return (
    <NodeWrapper data={data} selected={selected} nodeClass="subprocess-node">
      <Handle
        type="target"
        position={Position.Top}
        className="node-handle"
        id="input"
      />

      <div className="node-header">
        <FiLayers className="node-icon" />
        <span className="node-type">{getComponentLabel('subprocess')}</span>
        {data.locked && <FiLock className="lock-icon" />}
      </div>

      <div className="node-body subprocess-body">
        <div className="subprocess-icon">
          <FiBox />
        </div>
        <div className="node-label">{data.label || getComponentLabel('subprocess')}</div>
        {data.plugin && (
          <div className="node-plugin">{data.plugin}</div>
        )}
        {data.subflowCount && data.subflowCount > 0 && (
          <div className="subflow-count">
            {t('@count nodes', { '@count': data.subflowCount })}
          </div>
        )}
      </div>

      <Handle
        type="source"
        position={Position.Bottom}
        className="node-handle"
        id="output"
      />
    </NodeWrapper>
  );
});

SubprocessNode.displayName = 'SubprocessNode';

export default SubprocessNode;
