// import react
import React, { useMemo } from 'react';

// import node types
import Node from './index';
import Input from '../Input';
import ApiSignal from '../../signals/Api';
import { useSignal } from '../../signal';

/**
 * workflow node input
 *
 * @param props 
 */
const NodeChoose = (props = {}) => {
  // api
  const [api] = useSignal(ApiSignal);

  // use memo
  const nodes = useMemo(() => {
    // return keys
    return Object.keys(props.nodes).sort((a, b) => {
      // get name
      const nameA = props.nodes[a].name;
      const nameB = props.nodes[b].name;

      // sort by name
      return nameA.localeCompare(nameB);
    }).filter((type) => !['choose'].includes(type));
  }, [props.nodes]);
  
  // return jsx
  return (
    <Node
      {...props}
      title={api.translate('node:node.choose.title', 'Choose Node')}
      description={api.translate('node:node.choose.description', 'Choose a node to connect to.')}
    >
      <Input
        type="select"
        value="none"
        label={api.translate('node:node.choose.label', 'Node')}
        onChange={(e) => e.target.value === 'none' ? null : props.onChange('type', e.target.value)}
        placeholder={api.translate('node:node.choose.placeholder', 'Choose a node to connect to.')}
      >
        <option value="none">{api.translate('node:node.choose.none', 'None')}</option>
        {nodes.map((type) => (
          <option key={type} value={type}>
            {props.nodes[type].name}
          </option>
        ))}
      </Input>
    </Node>
  );
};

/**
 * @description - Workflow Node Input component
 */
export default NodeChoose;