import { observer } from 'mobx-react-lite';
import type { ComponentType } from 'react';
import { useRow } 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 { getOptions, getStatus } = useRow(key);
    const options = getOptions(valueName);
    const statuses = getStatus(valueName);

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

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

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