'use client'
import { useState, useRef, type FC, type ReactNode } from 'react'
import { motion } from 'framer-motion'
import { cn } from '@/lib/utils/cn'
import { Button } from '@/components/ui/button'
import { ArrowLeftIcon, ArrowRightIcon } from '@/components/icons/common'
import useGetResponsiveView from '@/lib/hooks/useGetResponsiveView'

type Props = {
  items: ReactNode[]
  itemWidth?: number
  gap?: number
}

export const Slider: FC<Props> = ({ items, itemWidth = 300, gap = 20 }) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const [offset, setOffset] = useState(0)
  const { isMobileView } = useGetResponsiveView()

  const currentWidth = isMobileView ? 280 : itemWidth
  const totalWidth = (currentWidth + gap) * items.length
  const slideStep = currentWidth + gap

  const maxOffset = -totalWidth

  const isBeginning = offset >= 0
  const isEnd = offset <= maxOffset + slideStep

  const activeSlide = Math.floor(Math.abs(offset) / slideStep)

  const slideNext = () => {
    setOffset((prev) => Math.max(prev - slideStep, maxOffset))
  }

  const slidePrev = () => {
    setOffset((prev) => Math.min(prev + slideStep, 0))
  }

  const goToSlide = (index: number) => {
    const newOffset = -index * slideStep
    setOffset(Math.min(0, Math.max(newOffset, maxOffset)))
  }

  return (
    <div className="w-full overflow-hidden" ref={containerRef}>
      <motion.div
        className="flex py-8"
        style={{ gap: `${gap}px` }}
        animate={{ x: offset }}
        transition={{ type: 'tween', duration: 0.3 }}
      >
        {items.map((item, i) => (
          <div
            key={i}
            style={{
              minWidth: currentWidth,
              maxWidth: currentWidth,
              flexShrink: 0,
            }}
          >
            {item}
          </div>
        ))}
      </motion.div>

      <div className="flex justify-between items-center sm:section container-padding sm:pl-0 sm:box sm:mx-0">
        <div className="flex gap-1.5 items-center">
          {items.map((_, i) => (
            <div
              key={i}
              onClick={() => goToSlide(i)}
              className={cn(
                'size-2 rounded-full transition-colors bg-grey-100 cursor-pointer',
                i === activeSlide && 'bg-grey-200 size-3',
              )}
            />
          ))}
        </div>
        <div className="flex items-center gap-4 p-1">
          <Button
            variant="icon-only-without-bg"
            onClick={slidePrev}
            iconOnly={true}
            icon={<ArrowLeftIcon className="size-5 stroke-grey-600" />}
            disabled={isBeginning}
            className="disabled:opacity-30 disabled:cursor-not-allowed"
          ></Button>
          <Button
            variant="icon-only-without-bg"
            onClick={slideNext}
            disabled={isEnd}
            className="disabled:opacity-30 disabled:cursor-not-allowed"
            iconOnly={true}
            icon={<ArrowRightIcon className="size-5 stroke-grey-600" />}
          ></Button>
        </div>
      </div>
    </div>
  )
}
