import React, { useRef, useEffect } from 'react';
import { useModalContext } from './context';

interface IModalContainer {
  className?: string;
  children: React.ReactNode;
  show?: boolean;
  size?: 'sm' | 'lg' | 'xl';
  overlap?: boolean;
  disableBackdropClick: boolean;
  [x: string]: any;
}

export const ModalContainer: React.FC<IModalContainer> = (props) => {
  const { children, className, size, disableBackdropClick, overlap, ...otherProps } = props;
  const { visible, hideModal } = useModalContext();
  const refModalOverlay = useRef(null);
  const refModal = useRef(null);
  const refModalContent = useRef(null);

  const classNamesModal = (size: string, overlap: boolean) => {
    let classList = 'b-modal';
    if (size) {
      classList += ` b-modal-${size}`;
    }
    if (overlap) {
      classList += ` is-overlapping`;
    }
    return classList;
  };

  const classNamesOverlay = (overlap: boolean, className: string) => {
    let classList = 'b-modal-overlay';
    if (overlap) {
      classList += ` is-overlapping`;
    }
    if (className) {
      classList += ` ${className}`;
    }
    return classList;
  };

  const handleOutsideClick = () => {
    if (disableBackdropClick == true) return;
    hideModal();
  };

  useEffect(() => {
    if (visible === false) {
      refModalOverlay.current.classList.remove('is-visible');
      refModal.current.classList.remove('is-visible');
    } else {
      setTimeout(() => {
        refModalOverlay.current.classList.add('is-visible');
        refModal.current.classList.add('is-visible');
      }, 0);
    }
  }, [visible]);

  return (
    <div ref={refModalOverlay} className={classNamesOverlay(overlap, className)} {...otherProps} onClick={handleOutsideClick}>
      <div ref={refModal} aria-modal="true" role="dialog" tabIndex={-1} className={classNamesModal(size, overlap)}>
        <div className="b-modal-dialog">
          <div ref={refModalContent} className="b-modal-content" onClick={(e) => e.stopPropagation()}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};