import { LinkButton } from '@strapi/design-system';
import { ExternalLink } from '@strapi/icons';
import PropTypes from 'prop-types';
import React, { memo, useCallback } from 'react';
import { useIntl } from 'react-intl';

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

const PreviewButton = ({ isDraft, target, url }) => {
  const { formatMessage } = useIntl();

  const handleClick = useCallback(
    (event) => {
      event.preventDefault();

      if (!url) return;

      window.open(url, target);
    },
    [url, target]
  );

  return (
    <LinkButton
      href={url}
      onClick={handleClick}
      size="S"
      startIcon={<ExternalLink />}
      variant="secondary"
      style={{ width: '100%' }}
      disabled={!url}
    >
      {formatMessage(
        isDraft
          ? {
              id: getTrad('form.button.draft'),
              defaultMessage: 'Open draft preview',
            }
          : {
              id: getTrad('form.button.published'),
              defaultMessage: 'Open live view',
            }
      )}
    </LinkButton>
  );
};

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

export default memo(PreviewButton);