import { DialogOverlay, DialogContent } from '@reach/dialog';
import { m, AnimatePresence } from 'framer-motion';
import React from 'react';
import clsx from 'clsx';

const MotionDialogOverlay = m(DialogOverlay);
const MotionDialogContent = m(DialogContent);

export function MotionDialog({
  isOpen,
  setIsOpen, // TODO remove this
  targetId,
  onDismiss,
  label,
  labelledby,
  /* standard props */
  className,
  children,
  /* motion props */
  motion,
  overlayMotion,
  contentMotion,
  duration = 0.25,
  /* overlay props -- see also `@reach-ui/dialog` API */
  overlayProps: { className: overlayClassName, ...overlayRestProps } = {},
  /* other */
  ...restProps
} = {}) {
  return (
    <AnimatePresence>
      {isOpen && (
        <MotionDialogOverlay
          key="dialog-overlay"
          onDismiss={onDismiss}
          transition={{ duration }}
          {...(overlayMotion || motion)}
          className={clsx(overlayClassName, 'dialog-overlay')}
          {...overlayRestProps}
        >
          <MotionDialogContent
            key="dialog-content"
            id={targetId}
            aria-label={label}
            aria-labelledby={labelledby}
            className={clsx(className, 'dialog-content')}
            transition={{ duration }}
            {...(contentMotion || motion)}
            {...restProps}
          >
            {children}
          </MotionDialogContent>
        </MotionDialogOverlay>
      )}
    </AnimatePresence>
  );
}