import { useOptions } from 'client/hooks/Calculation/useOptions';
import { useStatus } from 'client/hooks/Calculation/useStatus';
import { useValidation } from 'client/hooks/Calculation/useValidation';
import { useStoreValue } from 'client/hooks/Calculation/useValue';
import { observer } from 'mobx-react-lite';

export default ({ name, valueName, Component, ...props }) =>
  observer(() => {
    const { value, setCurrentValue } = useStoreValue({
      valueName,
    });
    const { status } = useStatus(name);
    const { validateStatus, message } = useValidation({
      elementName: name,
      value,
    });
    const { options } = useOptions(name);

    return (
      <Component
        value={value}
        setCurrentValue={setCurrentValue}
        status={status}
        validateStatus={validateStatus}
        message={message}
        options={options}
        {...props}
      />
    );
  });
