import React from 'react';
import { sortBy } from 'lodash';

import NodeDetailsControlButton from './node-details-control-button';

export default function NodeDetailsControls({controls, error, nodeId, pending}) {
  let spinnerClassName = 'fa fa-circle-o-notch fa-spin';
  if (pending) {
    spinnerClassName += ' node-details-controls-spinner';
  } else {
    spinnerClassName += ' node-details-controls-spinner hide';
  }

  return (
    <div className="node-details-controls">
      {error && <div className="node-details-controls-error" title={error}>
        <span className="node-details-controls-error-icon fa fa-warning" />
        <span className="node-details-controls-error-messages">{error}</span>
      </div>}
      <span className="node-details-controls-buttons">
        {sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
          nodeId={nodeId} control={control} pending={pending} key={control.id} />)}
      </span>
      {controls && <span title="Applying..." className={spinnerClassName} />}
    </div>
  );
}