import { observer } from 'mobx-react-lite';
import type { FC } from 'react';
import { useStatus } from 'stores/calculation/statuses/hooks';
import type { ComputedValues } from 'stores/calculation/values/computed';
import { useComputedValue } from 'stores/calculation/values/hooks';
import type { Elements } from '../config/map/computed';
import type { ElementsProps } from '../types/elements-props';

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

export default function buildComputedValue(
  Component: FC<any>,
  { elementName, valueName: computedValueName }: BuilderProps
) {
  return observer<ElementsProps[typeof elementName]>((props) => {
    const computedValue = useComputedValue(computedValueName);
    const status = useStatus(elementName);

    return <Component value={computedValue} status={status} {...props} />;
  });
}