import React, { useEffect, useRef } from "react"
import { motion } from "framer-motion"

import { cn } from "../../design-lib/utils"

interface ScrollerProps {
  axis?: "vertical" | "horizontal" | "free"
  className?: string
  children?: React.ReactNode
  height?: string
  width?: string
}

const Scroller: React.FC<ScrollerProps> = ({
  axis = "vertical",
  className = "",
  children,
  height,
  width,
}) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const [blurEdges, setBlurEdges] = React.useState<Record<string, boolean>>({
    top: false,
    left: false,
    bottom: false,
    right: false,
  })

  useEffect(() => {
    const container = containerRef.current as HTMLDivElement

    const checkScroll = () => {
      const {
        scrollTop,
        scrollLeft,
        scrollHeight,
        clientHeight,
        scrollWidth,
        clientWidth,
      } = container

      setBlurEdges({
        top: scrollTop > 0,
        left: scrollLeft > 0,
        bottom: scrollTop < scrollHeight - clientHeight,
        right: scrollLeft < scrollWidth - clientWidth,
      })
    }

    checkScroll()

    const handleScroll = () => {
      checkScroll()
    }

    container.addEventListener("scroll", handleScroll)
    return () => {
      container.removeEventListener("scroll", handleScroll)
    }
  }, [axis, containerRef])

  return (
    <div
      style={{
        height: height || "100%",
        width: width || "100%",
      }}
      className={cn("relative flex overflow-hidden hide-scrollbar")}
    >
      {blurEdges.top && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-x-0 top-0 z-50 -mt-6 h-12 bg-background blur-md"
        />
      )}
      {blurEdges.left && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-y-0 left-0 z-50 -ml-6 w-12 bg-background blur-md"
        />
      )}
      {blurEdges.bottom && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-x-0 bottom-0 z-50 -mb-6 h-12 bg-background blur-md"
        />
      )}
      {blurEdges.right && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-y-0 right-0 z-50 -mr-6 w-12 bg-background blur-md"
        />
      )}
      <div
        ref={containerRef}
        className={cn(
          "relative h-full w-full p-6",
          "rounded-md",
          "[&>*]:z-10",
          className
        )}
        style={{
          overflowX:
            axis === "free" || axis === "horizontal" ? "auto" : "hidden",
          overflowY: axis === "free" || axis === "vertical" ? "auto" : "hidden",
          WebkitOverflowScrolling: "touch",
        }}
      >
        {children}
      </div>
    </div>
  )
}

export default Scroller