import { getElementDefinition } from "./elements/registry";

/**
 * Renders a single content block of a view. Looks the block's `type` up in
 * the element registry (elements/registry.js) and reshapes the raw block
 * into the component's props via the element's own adapter. Unknown types
 * render a debug hint in dev mode and nothing in production.
 *
 * @param {Object} props
 * @param {Object} props.block - A content block from a view's `elements` array, e.g. `{ type: "headline", text: "..." }`.
 * @param {string|null} props.selectedTargetViewId - Currently armed target view (story-hub selection), passed through to selectWidget.
 * @param {function(?string): void} props.onSelectTarget - Arms/clears the target view selection.
 * @param {function(string): void} props.onNavigate - Navigates to a view id (used by buttonList/buttonGrid).
 */
export const ComponentRenderer = ({ block, selectedTargetViewId, onSelectTarget, onNavigate }) => {
  const definition = getElementDefinition(block.type);

  if (!definition) {
    // debug aid for content authors - never shown to exhibit visitors
    if (import.meta.env.DEV) {
      return (
        <div>
          <p>Undefined element type: {block.type}</p>
        </div>
      );
    }
    return null;
  }

  const { component: Component, adapter } = definition;
  const componentProps = adapter
    ? adapter(block, { selectedTargetViewId, onSelectTarget, onNavigate })
    : block;

  return <Component {...componentProps} />;
};