/**
 * Register callback function for HTMLElement to be executed when user clicks outside of element.
 * @example
```
<span
    ref={spanEl => registerClickOutside(spanEl, () => this.test())}>
      Hello, World!
</span>;
```
 */
export function registerClickOutside(
  component: ComponentInstance,
  element: HTMLClickOutsideElement,
  callback: () => void
): void {
  if (!element.clickOutsideRegistered) {
    window.addEventListener(
      "click",
      (e: Event) => {
        const target = e.target as HTMLElement;
        if (!element.contains(target)) {
          callback.call(component);
        }
      },
      false
    );
    element.clickOutsideRegistered = true;
  }
}

export interface HTMLClickOutsideElement extends HTMLStencilElement {
  clickOutsideRegistered?: boolean;
}