/**
 * This file contains helpers for translating react-intl messages, but only
 * if an intl object exists. intl needs to be supplied by the consuming project,
 * but can be null when e.g. rendering the style guide, which we want to handle
 * gracefully by displaying the default untranslated message.
 */

import React from 'react';

/**
 * Optionally translate one message.
 *
 * @param {string} message The react-intl message.
 * @param {Object} intl The intl object injected by react-intl.
 */
export function translate(message, intl) {
  return intl ? intl.formatMessage(message) : message.defaultMessage;
}

/**
 * Optionally translate an array of menu items.
 *
 * @param {Object[]} items An array of menu item description objects.
 * @param {Object} intl The intl object injected by react-intl.
 */
export function translateMenuItems(items, intl) {
  return items.map(item => {
    if (React.isValidElement(item)) {
      return item;
    }
    if ('submenu' in item) {
      return {
        label: translate(item.label, intl),
        description: item.description ? translate(item.description, intl) : null,
        submenu: translateMenuItems(item.submenu, intl),
      };
    }
    const shouldTranslateUrl = typeof item.to === 'object' && 'id' in item.to;
    return {
      ...item,
      label: translate(item.label, intl),
      description: item.description ? translate(item.description, intl) : null,
      to: shouldTranslateUrl ? translate(item.to, intl) : item.to,
    };
  });
}