import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import { settings } from 'carbon-components';
import { iconCopy } from 'carbon-icons';
import Icon from '../Icon';

const { prefix } = settings;

export default class CopyButton extends Component {
  static propTypes = {
    /**
     * Specify an optional className to be applied to the underlying <button>
     */
    className: PropTypes.string,

    /**
     * Provide a description for the icon representing the copy action that can
     * be read by screen readers
     */
    iconDescription: PropTypes.string,

    /**
     * Specify the string that is displayed when the button is clicked and the
     * content is copied
     */
    feedback: PropTypes.string,

    /**
     * Specify the time it takes for the feedback message to timeout
     */
    feedbackTimeout: PropTypes.number,

    /**
     * Specify an optional `onClick` handler that is called when the underlying
     * <button> is clicked
     */
    onClick: PropTypes.func,
  };

  static defaultProps = {
    iconDescription: 'Copy to clipboard',
    feedback: 'Copied!',
    feedbackTimeout: 2000,
    onClick: () => {},
  };

  state = {
    showFeedback: false,
  };

  /* istanbul ignore next */
  componentWillUnmount() {
    if (typeof this.timeoutId !== 'undefined') {
      clearTimeout(this.timeoutId);
      delete this.timeoutId;
    }
  }

  handleClick = evt => {
    this.setState({ showFeedback: true });
    this.timeoutId = setTimeout(() => {
      this.setState({ showFeedback: false });
    }, this.props.feedbackTimeout);

    this.props.onClick(evt);
  }; // eslint-disable-line no-unused-vars

  render() {
    const {
      iconDescription,
      className,
      feedback,
      feedbackTimeout, // eslint-disable-line no-unused-vars
      onClick, // eslint-disable-line no-unused-vars
      ...other
    } = this.props;
    const classNames = classnames(`${prefix}--snippet-button`, className);
    const feedbackClassNames = classnames(`${prefix}--btn--copy__feedback`, {
      [`${prefix}--btn--copy__feedback--displayed`]: this.state.showFeedback,
    });

    return (
      <button
        type="button"
        className={classNames}
        onClick={this.handleClick}
        {...other}>
        <Icon
          className={`${prefix}--snippet__icon`}
          icon={iconCopy}
          description={iconDescription}
        />
        <div className={feedbackClassNames} data-feedback={feedback} />
      </button>
    );
  }
}

@@ -199,33 +199,201 @@
 s';%0A
-import Icon from '../Icon
+// TODO: import %7B Copy16 %7D from '@carbon/icons-react';%0Aimport Copy16 from '@carbon/icons-react/lib/copy/16';%0Aimport Icon from '../Icon';%0Aimport %7B componentsX %7D from '../../internal/FeatureFlags
 ';%0A%0A
@@ -2472,16 +2472,214 @@
 other%7D%3E%0A
+        %7BcomponentsX ? (%0A          %3CCopy16%0A            className=%7B%60$%7Bprefix%7D--snippet__icon%60%7D%0A            aria-label=%7BiconDescription%7D%0A            alt=%7BiconDescription%7D%0A          /%3E%0A        ) : (%0A  
         
@@ -2684,16 +2684,18 @@
   %3CIcon%0A
+  
         
@@ -2741,24 +2741,26 @@
 %7D%0A          
+  
 icon=%7BiconCo
@@ -2763,16 +2763,18 @@
 onCopy%7D%0A
+  
         
@@ -2805,34 +2805,47 @@
 iption%7D%0A        
-/%3E
+  /%3E%0A        )%7D
 %0A        %3Cdiv cl

support new icon strategy (#1674)