import React from 'react';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';

function tooltip (msg)  {
	return (
  		<Tooltip className='select-action-table-error-tooltip' id='error-tooltip'>{msg}</Tooltip>
	);
};

const IconWithOverlay = ({overlayMsg}) => (
	<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
		<SVGIcon name='errorCircle'/>
	</OverlayTrigger>
);

function renderErrorOrCheck({hasError, overlayMsg}) {
	if (hasError === undefined) {
		return <SVGIcon name='angleRight' className='dummy-icon' />;
	}

	if (hasError) {
		return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon name='errorCircle'/>;
	}

	return <SVGIcon name='checkCircle'/>;
}

const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg}) => (
	<div className='select-action-table-row-wrapper'>
		<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
			{children}
		</div>
		{onDelete && <SVGIcon name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} />}
		{hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
	</div>
);

export default SelectActionTableRow;