import React from 'react';
import './UpgradeIcon.css';
import ReactTooltip from 'react-tooltip';
import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

export default props => {
  const styles = ['UpgradeIcon'];
  let placement = 'left';
  let toolTipText = 'UI Upgrade Available';
  if (props.release) {
    placement='bottom';
    styles.push('Release');
  }

  if (props.release || props.newReleases) {
    toolTipText = 'New Release Available';
  }

  return props
    .available ?
    (
      <div className={'UpgradeIconOwner'}>
        <p data-tip='' data-for={placement}>
          <a href={'#'}
             className={styles.join(' ')}
             onClick={props.clicked}>
            <FontAwesomeIcon icon={faExclamationTriangle}/>
          </a>
        </p>
        <ReactTooltip id={placement} place={placement}>{toolTipText}</ReactTooltip>
      </div>
    )
    : null;
};
