/* eslint-disable react/jsx-no-bind */
import { observer } from 'mobx-react-lite';
import type { ComponentType } from 'react';
import { useStatus } from 'stores/calculation/statuses/hooks';
import type { Elements } from '../config/map/actions';

type BuilderProps = {
  elementName: Elements;
  valueName: string;
};

export default function buildAction<T>(
  Component: ComponentType<T>,
  { elementName, valueName: actionName }: BuilderProps
) {
  return observer((props: T) => {
    const status = useStatus(elementName);

    return (
      <Component
        status={status}
        action={() => import(`process/${actionName}`).then((m) => m.default())}
        {...props}
      />
    );
  });
}