"use client";
import React, { useState, useCallback, useEffect } from 'react'
import * as Slider from '@radix-ui/react-slider'

interface SliderRangeProps {
  range: [number, number]
  min: number
  max: number
  step: number
  onChange: (value: [number, number]) => void
  onChangeComplete: (value: [number, number]) => void
  label?: string | React.ReactNode
  description?: string | React.ReactNode
  before?: React.ReactNode
  disabled?: boolean
}

const SliderRange: React.FC<SliderRangeProps> = ({
  range,
  min,
  max,
  step,
  onChange,
  onChangeComplete,
  label,
  description,
  before,
  disabled
}) => {
  const [rangeValue, setRangeValue] = useState<number[]>(range)
  const [dragging, setDragging] = useState(false)
  const [dragStartValue, setDragStartValue] = useState<number[] | null>(null)

  const validateRange = (range: number[], min: number, max: number): [number, number] => {
    return [
      Math.max(min, Math.min(max, range[0])),
      Math.max(min, Math.min(max, range[1]))
    ]
  }

  useEffect(() => {
    const newVal = validateRange(range, min, max)
    setRangeValue(newVal)
    if (newVal.toString() !== range?.toString()) {
      onChange(newVal)
      onChangeComplete(newVal)
    }
  }, [range, min, max, onChange, onChangeComplete])

  const handleDragStart = useCallback((event: React.MouseEvent) => {
    setDragging(true)
    if (rangeValue === undefined) return
    setDragStartValue(rangeValue)
  }, [rangeValue])

  const handleDragMove = useCallback((event: React.MouseEvent) => {
    if (!dragging || !dragStartValue) return

    const delta = event.movementX // Adjust this based on your needs
    const newRange: [number, number] = [
      Math.max(min, Math.min(max, dragStartValue[0] + delta)),
      Math.max(min, Math.min(max, dragStartValue[1] + delta))
    ]

    setRangeValue(newRange)
    onChange(newRange)
  }, [dragging, dragStartValue, min, max, onChange])

  const handleDragEnd = useCallback(() => {
    setDragging(false)
    if (rangeValue !== undefined && rangeValue.length === 2) {
      onChangeComplete([rangeValue[0], rangeValue[1]])
    }
  }, [rangeValue, onChangeComplete])

  const initialRange = validateRange(range, min, max)

  return (
    <>
      {typeof label === 'string' ? <label>{label}</label> : label}
      {typeof description === 'string' ? <p>{description}</p> : description}
      {before}
      <Slider.Root
        className="relative flex items-center select-none touch-none h-5"
        disabled={disabled}
        defaultValue={initialRange}
        value={rangeValue}
        min={min}
        max={max}
        step={step}
        minStepsBetweenThumbs={1}
        onValueChange={setRangeValue}
        onValueCommit={onChangeComplete}
      >
        <Slider.Track className="bg-slate-400 relative grow rounded-full h-[3px]">
          <Slider.Range
            className="absolute bg-red-400 rounded-full h-full cursor-pointer hover:h-8"
            onMouseDown={handleDragStart}
            onMouseMove={handleDragMove}
            onMouseUp={handleDragEnd}
          />
        </Slider.Track>
        <Slider.Thumb className="slider-thumb" />
      </Slider.Root>
    </>
  )
}

export default SliderRange
