/// <reference types="@applicaster/applicaster-types" />
import * as React from "react";

import { findComponentByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";

type Decorator = (component: React.Component<any>) => React.Component<any>;
type Watcher = Array<any>;
type Props = {
  componentType: string;
  decorators?: Decorator | Array<Decorator>;
};

export function useComponentResolver(
  { componentType, decorators }: Props,
  watchers?: Watcher
): React.ComponentType<any> {
  const { plugins, components } = usePickFromState(["plugins", "components"]);

  return React.useMemo(
    () =>
      findComponentByType({
        components,
        componentType,
        decorators,
        plugins,
      }),
    watchers
  );
}