import CX from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { Tooltip, OverlayTrigger } from "react-bootstrap";

/**
 * A component for rendering a font icon. A tooltip can optionally be shown on hover.
 *
 */
export const Icon = (props) => {

    function handleClick (e) {
        e.stopPropagation();
        props.onClick(e);
    }

    const className = CX(
        props.className,
        {
            "pull-right": props.pullRight,
            "fixed-width": props.fixedWidth,
            "hoverable pointer": props.onClick
        }
    );

    const style = {...(props.pad ? {marginLeft: "3px"} : {}), ...props.style};

    const icon = <i className={className} style={style} onClick={props.onClick ? handleClick : null} />;

    if (props.tip) {
        const tooltip = (
            <Tooltip id={props.tip}>
                {props.tip}
            </Tooltip>
        );

        return (
            <OverlayTrigger placement={props.tipPlacement || "top"} overlay={tooltip}>
                {icon}
            </OverlayTrigger>
        );
    }

    return icon;

};

Icon.propTypes = {
    name: PropTypes.string.isRequired,
    tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    tipPlacement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
    onClick: PropTypes.func,
    bsStyle: PropTypes.string,
    className: PropTypes.string,
    pullRight: PropTypes.bool,
    fixedWidth: PropTypes.bool,
    style: PropTypes.object,
    pad: PropTypes.bool
};

Icon.defaultProps = {
    pending: false,
    pullRight: false,
    fixedWidth: false
};

@@ -394,25 +394,16 @@
 me = CX(
-%0A        
 props.cl
@@ -410,24 +410,65 @@
 assName,
-%0A       
+ %60fas fa-$%7Bprops.name%7D%60, %60text-$%7Bprops.bsStyle%7D%60,
  %7B%0A     
@@ -470,20 +470,16 @@
         
- 
-   
 %22pull-ri
@@ -501,20 +501,16 @@
 lRight,%0A
-    
         
@@ -550,20 +550,16 @@
         
-   
- 
 %22hoverab
@@ -593,18 +593,9 @@
     
-    %7D%0A    
+%7D
 );%0A%0A

Update Icon components for FA5