import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
import MountingTransition from '@ricokahler/mounting-transition';

interface Props {
  open: boolean;
  onClose: () => void;
  className?: React.ReactNode;
  children: React.ReactNode;
}

function Modal({ className, children, open, onClose }: Props) {
  const handleMount = async () => {
    // do something useful like handle focus
  };

  const handleUnmount = async () => {
    // do something useful like handle focus
  };

  return (
    <MountingTransition
      mounted={open}
      portal={{ containerClass: 'modal__container' }}
      timeout={250}
      onMount={handleMount}
      onUnmount={handleUnmount}
    >
      {({ active }) => (
        <>
          <div
            className={classNames('modal__backdrop', {
              'modal__backdrop--active': active,
            })}
            onClick={onClose}
          />
          <div
            aria-modal="true"
            className={classNames(className, 'modal', {
              'modal--active': active,
            })}
          >
            {children}
          </div>
        </>
      )}
    </MountingTransition>
  );
}

export default Modal;