import { DisabledProps } from '../DisabledTooltip';
import { Text, Box } from '@wix/design-system';
import React, { ReactElement } from 'react';
import { observer } from 'mobx-react-lite';

function _CustomFieldsDisabledHint<P extends DisabledProps>(props: {
  children: ReactElement<P>;
  disabled?: boolean;
  content: string;
}) {
  const { children, disabled, content } = props;
  const { key, props: componentProps, type: Component } = children;
  const { dataHook } = componentProps;

  return (
    <Box direction="vertical" align="center" gap="SP1">
      <Component key={key} {...componentProps} disabled={disabled} />
      {disabled && (
        <Text
          dataHook={dataHook ? `${dataHook}-disabled-hint` : undefined}
          size="small"
          skin="disabled"
        >
          {content}
        </Text>
      )}
    </Box>
  );
}

export const CustomFieldsDisabledHint = observer(_CustomFieldsDisabledHint);