import React from "react";
import onClickOutSide from "react-onclickoutside";

export function withOutsideClick(methodName?: string) {
  // https://github.com/Pomax/react-onclickoutside#ie-does-not-support-classlist-for-svg-elements
  if (
    typeof SVGElement !== "undefined" &&
    !("classList" in SVGElement.prototype)
  ) {
    Object.defineProperty(SVGElement.prototype, "classList", {
      get() {
        return {
          contains: className => {
            return this.className.baseVal.split(" ").indexOf(className) !== -1;
          },
        };
      },
    });
  }
  return <C extends React.ComponentType<any>>(WrappedComponent: C): C => {
    const Component = onClickOutSide(WrappedComponent, {
      handleClickOutside: instance => instance[methodName],
    });
    return ((props =>
      React.createElement(Component, {
        ...props,
        outsideClickIgnoreClass: "ignore-outside-click",
      })) as any) as C;
  };
}