import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from './Button';
import { FormattedMessage } from 'react-intl';

const defaultText = (
  <FormattedMessage id="label.copy-to-clipboard" defaultMessage="Copy to clipboard" />
);

function CopyButton({ element, ...props }) {
  const [text, setText] = useState(defaultText);

  function handleClick() {
    if (element?.current) {
      element.current.select();
      document.execCommand('copy');
      setText(<FormattedMessage id="message.copied" defaultMessage="Copied!" />);
      window.getSelection().removeAllRanges();
    }
  }

  return (
    <Button {...props} onClick={handleClick}>
      {text}
    </Button>
  );
}

CopyButton.propTypes = {
  element: PropTypes.shape({
    current: PropTypes.shape({
      select: PropTypes.func.isRequired,
    }),
  }),
};

export default CopyButton;