import React, { useEffect, useRef, ReactElement } from 'react';
import Relationship from '../../RightZoneBar/Callback/Relationship';
import styles from '../../RightZoneBar/index.less';

function CallbackContainer({
  visible,
  handleClose,
  searchText
}: {
  visible: boolean;
  handleClose: () => any;
  searchText: string;
}): ReactElement {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClick = (e) => {
      if (!containerRef.current?.contains(e.target)) {
        const appDOM = document.getElementById('easyv-app');
        if (appDOM && appDOM.contains(e.target)) {
          handleClose();
        }
      }
    };
    document.addEventListener('click', handleClick, false);
    return () => {
      document.removeEventListener('click', handleClick,false);
    };
  }, []);

  return (
    <div style={{ display: 'inline-block', width: 'unset' }} className={styles.item} ref={containerRef}>
      <Relationship visible={visible} onClose={handleClose} searchText={searchText} />
    </div>
  );
}

export default CallbackContainer;
