import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import noop from 'lodash/noop';

import copyToClipboard from '../../utils/copyToClipboard';

class CopyLink extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired,
    /** String value to be copied to clipboard */
    copyText: PropTypes.string.isRequired,
    variant: PropTypes.oneOf(['blue', 'white', 'dark']),
    /** Callback that returns a boolean if copy was successful or not */
    onCopyText: PropTypes.func,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    variant: 'blue',
    onCopyText: noop,
    disabled: false,
  };

  handleCopy = () => {
    const { copyText, onCopyText, disabled } = this.props;

    if (disabled) return;

    const copied = copyToClipboard(copyText, this.hiddenNode);

    onCopyText(copied);
  };

  render() {
    const { children, variant } = this.props;

    const className = classnames('CopyLink', {
      [`CopyLink--${variant}`]: variant,
    });

    return (
      <a
        className={className}
        role="button"
        tabIndex={0}
        onKeyDown={this.handleCopy}
        onClick={this.handleCopy}
        ref={node => {
          this.hiddenNode = node;
        }}
      >
        {children}
      </a>
    );
  }
}

export default CopyLink;