import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
const { clipboard } = require('electron');

@autobind
class CopyButton extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showConfirmation: false,
    };
  }

  async _handleClick(e) {
    e.preventDefault();
    e.stopPropagation();

    const content =
      typeof this.props.content === 'string' ? this.props.content : await this.props.content();

    if (content) {
      clipboard.writeText(content);
    }

    this.setState({ showConfirmation: true });

    this._triggerTimeout = setTimeout(() => {
      this.setState({ showConfirmation: false });
    }, 2000);
  }

  componentWillUnmount() {
    clearTimeout(this._triggerTimeout);
  }

  render() {
    const {
      content, // eslint-disable-line no-unused-vars
      children,
      title,
      confirmMessage,
      ...other
    } = this.props;
    const { showConfirmation } = this.state;

    const confirm = typeof confirmMessage === 'string' ? confirmMessage : 'Copied';

    return (
      <button {...other} title={title} onClick={this._handleClick}>
        {showConfirmation ? (
          <span>
            {confirm} <i className="fa fa-check-circle-o" />
          </span>
        ) : (
          children || 'Copy to Clipboard'
        )}
      </button>
    );
  }
}

CopyButton.propTypes = {
  // Required
  content: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.func.isRequired]).isRequired,

  // Optional
  children: PropTypes.node,
  title: PropTypes.string,
  confirmMessage: PropTypes.string,
};

export default CopyButton;
