import { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { useRouter } from "next/router";
import { AnimatePresence, motion } from "framer-motion"
import { useWindowSize } from "usehooks-ts";
import { XMarkIcon } from "@heroicons/react/24/outline";
import clsxm from "~/libs/clsxm";

export interface ModalProps {
  children: React.ReactNode
  active: boolean
  title?: string
  close?: () => void,
  className?: string,
  mode?: "mobile" | "desktop"
}

export const Modal = ({
  children,
  active = false,
  title,
  close,
  className,
  mode
}: ModalProps) => {
  const router = useRouter()
  const { width } = useWindowSize()
  const [rendered, setRendered] = useState<boolean>(false)

  mode = mode || width >= 768 ? "desktop" : "mobile"

  useEffect(() => {
    setRendered(true)
  }, [])

  const modalClassNames = clsxm(
    "fixed bg-white max-h-[80vh] overflow-auto p-4 pt-0 z-[60] border-gray_r-6",
    {
      "left-1/2 -translate-x-1/2 translate-y-1/2 bottom-1/2 w-11/12 md:w-[500px] border rounded-xl": mode === 'desktop',
      "left-0 w-full border-t bottom-0 rounded-t-xl": mode === 'mobile'
    },
    className
  )

  const variant = {
    initial: { bottom: mode === 'desktop' ? '45%' : '-100%', opacity: 0 },
    animate: { bottom: mode === 'desktop' ? '50%' : 0, opacity: 1 },
    exit: { bottom: mode === 'desktop' ? '55%' : '-100%', opacity: 0 },
    transition: { ease: 'linear', duration: 0.25 }
  }

  return rendered && ReactDOM.createPortal(
    <AnimatePresence key={router.asPath}>
      {active && (
        <motion.div
          className="overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={close}
        />
      )}

      {active && (
        <motion.div
          {...variant}
          className={modalClassNames}
        >
          <div className='flex justify-between py-5 sticky top-0 '>
            <div className='font-semibold text-h-sm md:text-title-sm'>
              {title}
            </div>
            {close && (
              <button className="rounded-full h-10 w-10 flex justify-center items-center bg-white" type='button' aria-label="Close" onClick={close}>
                <XMarkIcon className='w-5 h-5 ' />
              </button>
            )}
          </div>

          {children}
        </motion.div>
      )}

    </AnimatePresence>,
    document.querySelector('body')!
  )
}