import { observer } from 'mobx-react-lite';
import type { ComponentType } from 'react';
import { useRowOptions, useRowStatuses } from 'stores/tables/insurance/hooks';
import { useInsuranceValue } from './hooks';
import type { Values } from './types';

export function buildOptionComponent<T>(
  key: string,
  Component: ComponentType<T>,
  valueName: Values
) {
  return observer((props: T) => {
    const [value, setValue] = useInsuranceValue(key, valueName);
    const options = useRowOptions(key);
    const statuses = useRowStatuses(key);

    return (
      <Component
        value={value}
        options={options[valueName]}
        setValue={setValue}
        status={statuses[valueName]}
        {...props}
      />
    );
  });
}

export function buildValueComponent<T>(
  key: string,
  Component: ComponentType<T>,
  valueName: Values
) {
  return observer((props: T) => {
    const [value, setValue] = useInsuranceValue(key, valueName);
    const statuses = useRowStatuses(key);

    return <Component value={value} setValue={setValue} status={statuses[valueName]} {...props} />;
  });
}