import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import Fa from './fa';

/**
 * A simple link that displays a tooltip at the top of the link
 */
export default class LinkTooltip extends React.Component {

    render() {
        const classes = [];
        if (this.props.muted) {
            classes.push('lnk-muted');
        }

        if (this.props.circle) {
            classes.push('lnk-circle');
        }

        if (this.props.className) {
            classes.push(this.props.className);
        }

        return React.createElement(
            OverlayTrigger,
            { placement: 'top', overlay: React.createElement(
                    Tooltip,
                    { id: 'tt' },
                    this.props.toolTip
                ) },
            React.createElement(
                'a',
                { className: classes.join(' '), onClick: this.props.onClick },
                React.createElement(Fa, { icon: this.props.icon })
            )
        );
    }
}

LinkTooltip.propTypes = {
    onClick: React.PropTypes.func,
    className: React.PropTypes.string,
    icon: React.PropTypes.string,
    circle: React.PropTypes.bool,
    muted: React.PropTypes.bool,
    toolTip: React.PropTypes.string
};

LinkTooltip.defaultProps = {
    circle: true,
    muted: true
};