import OutReactTooltip from "react-tooltip";
import $ from "jquery";
import React, {useEffect} from "react";
import classNames from "classnames";
import ErrProtecter from "../../utils/errProtect";
import "./TooltipList.scss";

export interface IToolTipListProps extends OutReactTooltip.Props {
  className?: string;
  scrollNodeClass?: string;
  tooltipRef?: React.MutableRefObject<any>;
  unPadding?: boolean;
  mode?: "custom";
}

const ToolTipList: React.SFC<IToolTipListProps> = ({
  tooltipRef,
  scrollNodeClass,
  children,
  unPadding,
  className,
  mode,
  ...props
}) => {
  const defualtProps = {
    hover: true,
    globalEventOff: "click",
    border: true
  };

  const classes = classNames("tooltipList", className, {
    "tooltipList--unPadding": unPadding,
    "tooltipList--noraml": !mode
  });

  // 스크롤시 닫치게해줌
  useEffect(() => {
    if (tooltipRef) {
      $(`.${scrollNodeClass}`).on("scroll", () => {
        OutReactTooltip.hide(tooltipRef.current);
      });
    }
  }, []);

  return (
    <OutReactTooltip
      className={classes}
      {...props}
      effect="solid"
      {...defualtProps}
    >
      {children}
    </OutReactTooltip>
  );
};

export default ErrProtecter(ToolTipList);
export const ReactTooltip = OutReactTooltip;