import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../../base/Icon';
import './styles.css';

var ButtonCopy = function ButtonCopy(_ref) {
  var content = _ref.content;

  var _useState = useState(false),
      copied = _useState[0],
      setCopied = _useState[1];

  var copyAction = function copyAction() {
    setCopied(true);
    navigator.clipboard.writeText(content);
    var timer = setTimeout(function () {
      setCopied(false);
    }, 1000);
    return function () {
      return clearTimeout(timer);
    };
  };
  var copyButtonTitle = copied ? 'copied' : 'copy hex code';
  if (navigator && navigator.clipboard || window.location.search.indexOf('backstop') > -1) {
    return React.createElement(
      'button',
      {
        className: 'ma__button-copy',
        onClick: copyAction,
        title: copyButtonTitle,
        'aria-label': copyButtonTitle
      },
      copied ? React.createElement(Icon, { name: 'inputsuccess', svgWidth: 16, svgHeight: 16 }) : React.createElement(Icon, { name: 'copy', svgWidth: 16, svgHeight: 16 })
    );
  }
  // If no clipboard available, don't render ButtonCopy
  return null;
};

ButtonCopy.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Copied content string. */
  content: PropTypes.string
} : {};

export default ButtonCopy;