import { Box, Tooltip, TooltipProps } from '@wix/design-system';
import React, { ReactElement } from 'react';

export interface DisabledProps {
  dataHook?: string;
  disabled?: boolean;
}

export interface DisabledTooltipProps<P extends DisabledProps>
  extends TooltipProps {
  children: ReactElement<P>;
  width?: string | number;
}

export function DisabledTooltip<P extends DisabledProps>(
  props: DisabledTooltipProps<P>,
) {
  const { children, width, ...rest } = props;
  const {
    props: { disabled },
  } = children;

  let child = children;

  if (disabled) {
    child = (
      <Tooltip {...rest}>
        <Box direction="horizontal" width={width}>
          {child}
        </Box>
      </Tooltip>
    );
  }

  return child;
}