import { Button } from '@strapi/design-system';
import { Link as LinkIcon } from '@strapi/icons';
import { useNotification } from '@strapi/strapi/admin';
import PropTypes from 'prop-types';
import React, { memo, useCallback } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useIntl } from 'react-intl';

import { getTrad } from '../../utils';

const CopyLinkButton = ({ isDraft, url }) => {
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();

  const handleOnCopy = useCallback(() => {
    toggleNotification({
      type: 'success',
      message: formatMessage({
        id: 'notification.success.link-copied',
        defaultMessage: 'Link copied to the clipboard',
      }),
    });
  }, [toggleNotification, formatMessage]);

  return (
    <CopyToClipboard text={url} onCopy={handleOnCopy}>
      <Button size="S" startIcon={<LinkIcon />} variant="secondary" style={{ width: '100%' }}>
        {formatMessage(
          isDraft
            ? {
                id: getTrad('form.button.copy-link.draft'),
                defaultMessage: 'Copy preview link',
              }
            : {
                id: getTrad('form.button.copy-link'),
                defaultMessage: 'Copy link',
              }
        )}
      </Button>
    </CopyToClipboard>
  );
};

CopyLinkButton.propTypes = {
  isDraft: PropTypes.bool.isRequired,
  url: PropTypes.string.isRequired,
};

export default memo(CopyLinkButton);