import browserInfo from 'browser-info';
import Clipboard from 'clipboard';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {Tooltip} from 'reactjs-components';

import Icon from './Icon';

const METHODS_TO_BIND = [
  'handleCopy',
  'handleCopyIconMouseEnter'
];

class ClipboardTrigger extends React.Component {
  constructor() {
    super();

    this.state = {
      hasCopiedToClipboard: false
    };

    METHODS_TO_BIND.forEach((method) => {
      this[method] = this[method].bind(this);
    });
  }

  componentDidMount() {
    if (this.refs.copyButton) {
      this.clipboard = new Clipboard(ReactDOM.findDOMNode(this.refs.copyButton),
        {
          text: () => {
            return this.props.copyText;
          }
        }
      );

      this.clipboard.on('success', this.handleCopy);
    }
  }

  componentWillUnmount() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }

  handleCopy() {
    this.setState({hasCopiedToClipboard: true});
  }

  handleCopyIconMouseEnter() {
    this.setState({hasCopiedToClipboard: false});
  }

  render() {
    if (/safari/i.test(browserInfo().name)) {
      return null;
    }

    const {copiedText, tooltipContent} = this.props;
    const clipboardIcon = (
      <Icon
        id="clipboard"
        size="mini"
        className="clickable icon-clipboard"
        color="purple"
        onMouseEnter={this.handleCopyIconMouseEnter} />
    );
    let text = tooltipContent;

    if (this.state.hasCopiedToClipboard) {
      text = copiedText;
    }

    return (
      <Tooltip position="bottom" content={text} ref="copyButton">
        {clipboardIcon}
      </Tooltip>
    );
  }
}

ClipboardTrigger.defaultProps = {
  copiedText: 'Copied!',
  tooltipContent: 'Copy to clipboard'
};

ClipboardTrigger.propTypes = {
  copiedText: PropTypes.string,
  copyText: PropTypes.string,
  tooltipContent: PropTypes.string
};

module.exports = ClipboardTrigger;

@@ -1,44 +1,4 @@
-import browserInfo from 'browser-info';%0A
 impo
@@ -902,326 +902,292 @@
 %0A%0A  
-handleCopy() %7B%0A    this.setState(%7BhasCopiedToClipboard: true%7D);%0A  %7D%0A%0A  handleCopyIconMouseEnter() %7B%0A    this.setState(%7BhasCopiedToClipboard: false%7D);%0A  %7D%0A%0A  render() %7B%0A    if (/safari/i.test(browserInfo().name)) %7B%0A      return null;
+getTriggerContent() %7B%0A    const %7Bchildren, className%7D = this.props;%0A%0A    if (children != null) %7B%0A      return (%0A        %3Cspan className=%7BclassName%7D onMouseEnter=%7Bthis.handleCopyIconMouseEnter%7D%0A          ref=%22copyButton%22%3E%0A          %7Bchildren%7D
 %0A    
-%7D%0A%0A
     
-const %7BcopiedText, tooltipContent%7D = this.props;%0A    const clipboardIcon =
+%3C/span%3E%0A      );%0A    %7D%0A%0A    return
  (%0A 
@@ -1258,17 +1258,18 @@
 assName=
-%22
+%7B%60
 clickabl
@@ -1276,33 +1276,47 @@
 e icon-clipboard
-%22
+ $%7BclassName%7D%60%7D
 %0A        color=%22
@@ -1379,19 +1379,380 @@
 ter%7D
- /%3E%0A    );%0A
+%0A        ref=%22copyButton%22 /%3E%0A    );%0A  %7D%0A%0A  handleCopy() %7B%0A    this.setState(%7BhasCopiedToClipboard: true%7D);%0A%0A    if (this.props.onTextCopy) %7B%0A      this.props.onTextCopy();%0A    %7D%0A  %7D%0A%0A  handleCopyIconMouseEnter() %7B%0A    this.setState(%7BhasCopiedToClipboard: false%7D);%0A  %7D%0A%0A  render() %7B%0A    const %7BcopiedText, tooltipContent, useTooltip%7D = this.props;%0A%0A    if (useTooltip) %7B%0A  
     
@@ -1779,24 +1779,26 @@
 ntent;%0A%0A    
+ 
+ 
 if (this.sta
@@ -1826,24 +1826,26 @@
 rd) %7B%0A      
+  
 text = copie
@@ -1851,27 +1851,31 @@
 edText;%0A    
+ 
+ 
 %7D%0A%0A
+  
     return (
@@ -1881,16 +1881,18 @@
 (%0A      
+ 
+ 
 %3CTooltip
@@ -1928,72 +1928,116 @@
 ext%7D
- ref=%22copyButton%22%3E%0A        %7BclipboardIcon%7D%0A      %3C/Tooltip%3E%0A    
+%3E%0A          %7Bthis.getTriggerContent()%7D%0A        %3C/Tooltip%3E%0A      );%0A    %7D%0A%0A    return this.getTriggerContent(
 );%0A 
@@ -2181,101 +2181,214 @@
 %0A  c
-opiedText: PropTypes.string,%0A  copyText: PropTypes.string,%0A  tooltipContent: PropTypes.string
+hildren: PropTypes.node,%0A  className: PropTypes.string,%0A  copiedText: PropTypes.node,%0A  copyText: PropTypes.node,%0A  onTextCopy: PropTypes.func,%0A  tooltipContent: PropTypes.node,%0A  useTooltip: PropTypes.bool
 %0A%7D;%0A

Extend ClipboardTrigger functionality