import { useCallback } from 'react';
import PropTypes from 'prop-types';
import { ErrorBoundary } from 'react-error-boundary';
import { useTranslation } from 'react-i18next';
import CompanionWindowRegistry from '../lib/CompanionWindowRegistry';
import CompanionWindow from '../containers/CompanionWindow';
import ErrorContent from '../containers/ErrorContent';

/**
 * Render a companion window using the appropriate component for the content
 */
export function CompanionWindowFactory({ content = null, id, windowId }) {
  const { t } = useTranslation();
  const ErroredCompanionWindow = useCallback(
    ({ error }) => (
      <CompanionWindow title={t('error')} windowId={windowId} id={id}>
        <ErrorContent error={error} windowId={windowId} companionWindowId={id} />
      </CompanionWindow>
    ),
    [windowId, t, id],
  );

  const DynamicCompanionWindowType = CompanionWindowRegistry[content];

  if (!DynamicCompanionWindowType) return null;

  return (
    <ErrorBoundary fallbackComponent={ErroredCompanionWindow}>
      <DynamicCompanionWindowType id={id} windowId={windowId} />
    </ErrorBoundary>
  );
}

CompanionWindowFactory.propTypes = {
  content: PropTypes.string,
  id: PropTypes.string.isRequired,
  windowId: PropTypes.string.isRequired,
};