import type { ReactNode } from 'react'
import * as Dialog from '@radix-ui/react-dialog'
import { AnimatePresence, m } from 'framer-motion'

import {
  modalContentQuickTransition,
  modalContentTransition,
  modalOverlayTransition,
} from '../../lib/motion'

type MotionDialogContentProps = {
  open: boolean
  overlayClassName: string
  contentClassName: string
  placement?: 'center' | 'inset'
  motionPreset?: 'default' | 'fade'
  onExitComplete?: () => void
  children: ReactNode
}

export function MotionDialogContent({
  open,
  overlayClassName,
  contentClassName,
  placement = 'center',
  motionPreset = 'default',
  onExitComplete,
  children,
}: MotionDialogContentProps) {
  const contentMotion =
    motionPreset === 'fade'
      ? placement === 'center'
        ? {
            initial: {
              opacity: 0,
              x: '-50%',
              y: '-50%',
            },
            animate: {
              opacity: 1,
              x: '-50%',
              y: '-50%',
            },
            exit: {
              opacity: 0,
              x: '-50%',
              y: '-50%',
            },
          }
        : {
            initial: {
              opacity: 0,
            },
            animate: {
              opacity: 1,
            },
            exit: {
              opacity: 0,
            },
          }
      : placement === 'center'
        ? {
            initial: {
              opacity: 0,
              x: '-50%',
              y: '-48%',
              scale: 0.98,
            },
            animate: {
              opacity: 1,
              x: '-50%',
              y: '-50%',
              scale: 1,
            },
            exit: {
              opacity: 0,
              x: '-50%',
              y: '-48%',
              scale: 0.98,
            },
          }
        : {
            initial: {
              opacity: 0,
              y: 10,
              scale: 0.99,
            },
            animate: {
              opacity: 1,
              y: 0,
              scale: 1,
            },
            exit: {
              opacity: 0,
              y: 8,
              scale: 0.99,
            },
          }

  return (
    <AnimatePresence onExitComplete={onExitComplete}>
      {open && (
        <Dialog.Portal forceMount key="dialog">
          <Dialog.Overlay asChild forceMount>
            <m.div
              className={overlayClassName}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={modalOverlayTransition}
            />
          </Dialog.Overlay>

          <Dialog.Content asChild forceMount>
            <m.div
              className={contentClassName}
              initial={contentMotion.initial}
              animate={contentMotion.animate}
              exit={contentMotion.exit}
              transition={
                motionPreset === 'fade'
                  ? modalContentQuickTransition
                  : modalContentTransition
              }
            >
              {children}
            </m.div>
          </Dialog.Content>
        </Dialog.Portal>
      )}
    </AnimatePresence>
  )
}
