import React, { useEffect, ReactElement, ReactNode } from 'react';
import './ModalPopup.scss';

interface Props {
  children: ReactNode;
  className: string;
  onHide: () => void;
  show: boolean;
}

export const ModalPopup = (props: Props): ReactElement<HTMLDivElement> => {
  useEffect(() => {
    const body = document.querySelector('body');
    if (body) {
      body.style.position = 'fixed';
      body.style.marginTop = `${window.pageYOffset}px`;
    }

    return (): void => {
      const body = document.querySelector('body');
      if (body) {
        body.style.position = 'static';
        body.style.marginTop = `0px`;
        window.scrollTo(0, window.pageYOffset);
      }
    };
  });

  const handleClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
  ): void => {
    event.stopPropagation();
  };

  return (
    props.show && (
      <div className="modal-popup-overlay" onClick={props.onHide}>
        <div className={`modal-popup ${props.className}`} onClick={handleClick}>
          {props.children}
        </div>
      </div>
    )
  );
};