/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useCallback, useEffect, useRef, useState } from 'react';

interface CustomVolumeSliderProps {
  volume: number;
  onChange: (volume: number) => void;
  className?: string;
}

const CustomVolumeSlider = ({
  volume,
  onChange,
  className = '',
}: CustomVolumeSliderProps) => {
  const [isDragging, setIsDragging] = useState(false);
  const sliderRef = useRef<HTMLDivElement>(null);

  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!isDragging || !sliderRef.current) return;

      const rect = sliderRef.current.getBoundingClientRect();
      const y = e.clientY - rect.top;
      const height = rect.height;
      const newVolume = Math.max(0, Math.min(1, 1 - y / height));
      onChange(newVolume);
    },
    [isDragging, onChange]
  );

  const handleMouseUp = useCallback(() => {
    setIsDragging(false);
  }, []);

  const handleClick = useCallback(
    (e: React.MouseEvent) => {
      if (!sliderRef.current) return;

      const rect = sliderRef.current.getBoundingClientRect();
      const y = e.clientY - rect.top;
      const height = rect.height;
      const newVolume = Math.max(0, Math.min(1, 1 - y / height));
      onChange(newVolume);
    },
    [onChange]
  );

  // Mouse event listeners
  useEffect(() => {
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      return () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [isDragging, handleMouseMove, handleMouseUp]);

  return (
    <div
      ref={sliderRef}
      className={`relative cursor-pointer overflow-hidden rounded-full bg-white/20 select-none ${className}`}
      onMouseDown={handleMouseDown}
      onClick={handleClick}
    >
      {/* Volume fill */}
      <div
        className='absolute right-0 bottom-0 left-0 bg-white transition-all duration-75'
        style={{
          height: `${volume * 100}%`,
          minHeight: volume > 0 ? '8px' : '0px',
        }}
      />
    </div>
  );
};

export default CustomVolumeSlider;