import React, { Fragment } from 'react';

const Intl = jest.genMockFromModule('react-intl');

const intl = {
  formatMessage: ({ id, values }) => {
    if (values) {
      return JSON.stringify({ id, values });
    }

    return id;
  },
  locale: 'en',
};

Intl.injectIntl = Node => {
  const renderWrapped = props => <Node {...props} intl={intl} />;
  renderWrapped.displayName = Node.displayName || Node.name || 'Component';
  return renderWrapped;
};

Intl.FormattedMessage = ({ id, tagName: TagName = 'span', values, children }) => {
  const valuesString = !!values
    ? Object.entries(values || {}).map(([key, value], index) => {
      if (React.isValidElement(value)) {
        return <Fragment key={index}>{value}</Fragment>;
      } else {
        return JSON.stringify({ [key]: value });
      }
    })
    : [null];

  if (typeof children === 'function') {
    return children(id, ...valuesString);
  }

  return (
    <TagName>
      {id}
      {valuesString}
    </TagName>
  );
};

Intl.IntlProvider = props => <>{props.children}</>;
module.exports = Intl;