import { useClickOutside } from 'hooks/useClickOutside';
import { useEventListener } from 'hooks/useEventListener';
import { call } from 'utils/call';

type ControllerProps = {
  componentRef: any;
  onResize: (ev: Event) => void;
  onScroll: (ev: Event) => void;
  onClickOutside: (ev: MouseEvent) => void;
  children: JSX.Element;
};

export const Controller = ({
  componentRef,
  onResize,
  onScroll,
  onClickOutside,
  children,
}: ControllerProps) => {
  function handleScroll(ev: Event) {
    if (
      componentRef.current &&
      componentRef.current.contains(ev.target) === false
    ) {
      call(onScroll, ev);
    }
  }

  const handleResize = (ev: Event) => {
    call(onResize, ev);
  };

  // TODO conditional events
  useClickOutside(componentRef, onClickOutside);
  useEventListener('scroll', handleScroll, true);
  useEventListener('resize', handleResize);

  return children;
};