import { observer } from 'mobx-react-lite';
import type { FC } from 'react';
import { useStatus } from 'stores/calculation/statuses/hooks';
import { useValidation } from 'stores/calculation/validation/hooks';
import { useSetValue, 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 buildValue(Component: FC<any>, { elementName, valueName }: BuilderProps) {
  return observer<ElementsProps[typeof elementName]>((props) => {
    const value = useValue(valueName);
    const setValue = useSetValue(valueName);
    const status = useStatus(elementName);
    const { isValid, help } = useValidation(elementName);

    return (
      <Component
        defaultValue={value}
        setValue={setValue}
        status={status}
        isValid={isValid}
        help={help}
        {...props}
      />
    );
  });
}