import {
  DisabledProps,
  DisabledTooltip,
  DisabledTooltipProps,
} from '../DisabledTooltip';
import React from 'react';
import { observer } from 'mobx-react-lite';

function _CustomFieldsDisabledTooltip<P extends DisabledProps>(
  props: DisabledTooltipProps<P> & {
    disabled?: boolean;
    content: string;
  },
) {
  const { children, disabled, content, ...rest } = props;
  const { key, props: componentProps, type: Component } = children;
  const { dataHook } = componentProps;

  return (
    <DisabledTooltip
      dataHook={dataHook ? `${dataHook}-disabled-tooltip` : undefined}
      content={content}
      appendTo="window"
      maxWidth="226px"
      {...rest}
    >
      <Component key={key} {...componentProps} disabled={disabled} />
    </DisabledTooltip>
  );
}

export const CustomFieldsDisabledTooltip = observer(
  _CustomFieldsDisabledTooltip,
);