import React from "react";

export default function withClickOutside(ComponentToEnhance: any) {
    return function WithClickOutside({ ...props }) {
      const [isClickOutside, setClickedOutside] = React.useState(false);
      const [isMounted, setIsMounted] = React.useState(false);
      const wrapper = React.useRef(null);
  
      React.useEffect(() => {
        if (!isMounted) {
          setIsMounted(true);
        }
      }, [isMounted]);
      return (
        <div
          id={`click-outside-${props.id}`}
          ref={wrapper}
          onBlur={() => {
            if (isMounted) {
              setClickedOutside(true);
            }
          }}
        >
          <ComponentToEnhance isClickOutside={isClickOutside} {...props} />
        </div>
      );
    };
  }