import React from 'react';
import { RemoveScroll } from 'react-remove-scroll';

import './Modal.scss';

export interface Props extends React.HTMLAttributes<HTMLDivElement> {
  onClose(): void;
  position?: {
    top?: string | number;
    right?: string | number;
    bottom?: string | number;
    left?: string | number;
  };
}

export const DEFAULT_POSITIONS = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};

export const Modal: React.FC<Props> = ({
  children,
  position = DEFAULT_POSITIONS,
  style,
  onClose,
  ...rest
}) => {
  const ref = React.useRef<HTMLDivElement>(null);

  const handleClose = React.useCallback(() => onClose(), [onClose]);

  const handleKeydown = React.useCallback(
    (e: KeyboardEvent) => {
      switch (e.key) {
        case 'Escape':
          return handleClose();
        default:
          break;
      }
    },
    [handleClose],
  );

  React.useEffect(() => {
    window.addEventListener('keydown', handleKeydown);

    return (): void => {
      window.removeEventListener('keydown', handleKeydown);
    };
  }, [handleKeydown]);

  return (
    <RemoveScroll>
      <div
        className="Modal"
        ref={ref}
        style={{ ...position, ...style }}
        {...rest}
      >
        {children}
      </div>
    </RemoveScroll>
  );
};