import { observer } from 'mobx-react-lite';
import type { FC } from 'react';
import { useValue } from 'stores/calculation/values/hooks';
import type { Values } from 'stores/calculation/values/types';
import type { Elements } from '../config/map-values';
import type { ElementsProps } from '../types/elements-props';

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

export default function buildReadonly(
  Component: FC<any>,
  { elementName, valueName }: BuilderProps
) {
  return observer<ElementsProps[typeof elementName]>((props) => {
    const value = useValue(valueName);

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