import ReactTooltip from "react-tooltip";
import { ToolTip } from "../Widgets/DomainProps";

export interface ToolTipProps {
  toolTip?: Partial<ToolTip>;
  span?: string;
  [key: string]: any;
}

function withToolTip(Component: React.ComponentType<any>) {
  return (props: ToolTipProps) => {
    const toolTipProps: ToolTip = { ...props.toolTip } as ToolTip;

    return toolTipProps.isApply ? (
      <div
        className={`${props.span ?? ""}`}
        data-for={toolTipProps.id}
        data-effect={toolTipProps.dataEffect}
        data-html={toolTipProps.dataHtml}
        data-place={toolTipProps.dataPlace}
        data-multiline={toolTipProps.dataMultiline}
        data-type={toolTipProps.dataType}
        data-tip={toolTipProps.dataTip}
        data-event="mouseover"
        data-event-off="mouseout"
      >
        <Component {...props} />
        <ReactTooltip getContent={(dataTip) => dataTip} id={toolTipProps.id} />
      </div>
    ) : (
      <Component {...props} />
    );
  };
}

export default withToolTip;
