import React, {
  FunctionComponent,
  MutableRefObject,
  useEffect,
  useRef,
} from "react";

import { Component } from "react";
import PropTypes from "prop-types";

export interface ClickOutsideProps {
  onClickOutside: (e?: MouseEvent) => void;
  children: React.ReactNode | any;
  render: () => void;
}

export default class ClickOutside extends Component<ClickOutsideProps> {
  public domNode: Element | null = null;

  handleRef = (element) => {
    this.domNode = element;
  };

  public componentDidMount() {
    document.addEventListener("click", this.handleClick, true);
  }

  public componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, true);
    document.removeEventListener("touchstart", this.handleClick, true);
  }

  public handleClick = (event) => {
    function hasParent(element, root) {
      return root && root.contains(element);
    }

    if (!hasParent(event.target, this.domNode)) {
      if (typeof this.props.onClickOutside === "function") {
        this.props.onClickOutside(event);
      }
    }
  };

  render() {
    return null;
    // return this.props.render({
    //   innerRef: this.handleRef,
    // });
  }
}