import React from 'react';
import ReactTooltip from 'react-tooltip';
import { Glyphicon } from 'react-bootstrap';

const clientStatusTextColor = {
    xcomplete: 'text-success',
    xrunning: 'text-info',
    xlost: 'text-warning',
    xfailed: 'text-danger',
};

const clientStatusIcon = {
    complete: <Glyphicon glyph="ok" />,
    running: <Glyphicon glyph="cog" />,
    lost: <Glyphicon glyph="remove" />,
    failed: <Glyphicon glyph="exclamation-sign" />,
};

export function renderDesiredStatus(allocation) {
    if (allocation.DesiredDescription) {
        return (
          <div>
            <ReactTooltip id={ `tooltip-${allocation.ID}` }>{allocation.DesiredDescription}</ReactTooltip>
            <span data-tip data-for={ `tooltip-${allocation.ID}` } className="dotted">
              {allocation.DesiredStatus}
            </span>
          </div>
        );
    }

    return <div>{allocation.DesiredStatus}</div>;
}

export function renderClientStatus(allocation) {
    let textColor = null;
    let icon = null;

    if (allocation.ClientStatus in clientStatusTextColor) {
        textColor = clientStatusTextColor[allocation.ClientStatus];
    }

    if (allocation.ClientStatus in clientStatusIcon) {
        icon = clientStatusIcon[allocation.ClientStatus];
    }

    return <span className={ textColor }>{icon} {allocation.ClientStatus}</span>;
}

@@ -1294,77 +1294,250 @@
 urn 
-%3Cspan className=%7B textColor %7D%3E%7Bicon%7D %7Ballocation.ClientStatus%7D%3C/span%3E
+(%0A      %3Cdiv%3E%0A        %3CReactTooltip id=%7B %60client-status-$%7Ballocation.ID%7D%60 %7D%3E%7Ballocation.ClientStatus%7D%3C/ReactTooltip%3E%0A        %3Cspan data-tip data-for=%7B %60client-status-$%7Ballocation.ID%7D%60 %7D className=%7B textColor %7D%3E%7Bicon%7D%3C/span%3E%0A      %3C/div%3E%0A    )
 ;%0A%7D%0A

change allocation status into icon only with tooltip