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();
    }
  }

  getTriggerContent() {
    const {children, className} = this.props;

    if (children != null) {
      return (
        <span className={className} onMouseEnter={this.handleCopyIconMouseEnter}
          ref="copyButton">
          {children}
        </span>
      );
    }

    return (
      <span onMouseEnter={this.handleCopyIconMouseEnter} ref="copyButton">
        <Icon
          id="clipboard"
          size="mini"
          className={`clickable icon-clipboard ${className}`}
          color="purple" />
      </span>
    );
  }

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

    if (this.props.onTextCopy) {
      this.props.onTextCopy();
    }
  }

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

  render() {
    const {copiedText, tooltipContent, useTooltip} = this.props;

    if (useTooltip) {
      let text = tooltipContent;

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

      return (
        <Tooltip position="bottom" content={text}>
          {this.getTriggerContent()}
        </Tooltip>
      );
    }

    return this.getTriggerContent();
  }
}

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

ClipboardTrigger.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  copiedText: PropTypes.node,
  copyText: PropTypes.node,
  onTextCopy: PropTypes.func,
  tooltipContent: PropTypes.node,
  useTooltip: PropTypes.bool
};

module.exports = ClipboardTrigger;

@@ -975,60 +975,88 @@
     
-if (
+let 
 child
-ren != null) %7B%0A      return (%0A        %3Cspan
+Node = (%0A      %3CIcon%0A        id=%22clipboard%22%0A        size=%22mini%22%0A       
  cla
@@ -1067,169 +1067,208 @@
 me=%7B
+%60
 cl
-assName%7D onMouseEnter=%7Bthis.handleCopyIconMouseEnter%7D%0A          ref=%22copyButton%22%3E%0A          %7Bchildren%7D%0A        %3C/span%3E%0A      );%0A    %7D%0A%0A    return (%0A      %3Cspan
+ickable icon-clipboard $%7BclassName%7D%60%7D%0A        color=%22purple%22 /%3E%0A    );%0A%0A    if (children != null) %7B%0A      childNode = children;%0A    %7D%0A%0A    return (%0A      %3Cspan%0A        className=%7BclassName%7D%0A       
  onM
@@ -1308,16 +1308,24 @@
 seEnter%7D
+%0A       
  ref=%22co
@@ -1347,150 +1347,19 @@
     
-%3CIcon%0A          id=%22clipboard%22%0A          size=%22mini%22%0A          className=%7B%60clickable icon-clipboard $%7BclassName%7D%60%7D%0A          color=%22purple%22 /%3E
+%7BchildNode%7D
 %0A   
@@ -1682,24 +1682,71 @@
  this.props;
+%0A    const %7BhasCopiedToClipboard%7D = this.state;
 %0A%0A    if (us
@@ -1763,18 +1763,20 @@
 %7B%0A      
-le
+cons
 t text =
@@ -1780,104 +1780,59 @@
 t = 
-tooltipContent;%0A%0A      if (this.state.hasCopiedToClipboard) %7B%0A        text = copiedText;%0A      %7D
+hasCopiedToClipboard ? copiedText : tooltipContent;
 %0A%0A  

Clean up from comments