import type React from 'react';
import { memo, useRef } from 'react';
import styles from './Slider.module.scss';

interface SliderProps {
  value: [number, number];
  min?: number;
  max?: number;
  onChange?: (value: [number, number]) => void;
}

const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));

export const Slider: React.FC<SliderProps> = ({ value, min = 0, max = 99, onChange }) => {
  const trackRef = useRef<HTMLDivElement>(null);

  const getPercent = (val: number) => ((val - min) / (max - min)) * 100;

  const handleDrag = (e: React.MouseEvent | React.TouchEvent, type: 'min' | 'max') => {
    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
    const track = trackRef.current;
    if (!track) {
      return;
    }
    const rect = track.getBoundingClientRect();
    const percent = clamp((clientX - rect.left) / rect.width, 0, 1);
    const val = Math.round(percent * (max - min) + min);
    let newValue: [number, number] = value;
    if (type === 'min') {
      newValue = [clamp(val, min, value[1]), value[1]];
    } else {
      newValue = [value[0], clamp(val, value[0], max)];
    }
    onChange?.(newValue);
  };

  const handleStart = (type: 'min' | 'max') => (e: React.MouseEvent | React.TouchEvent) => {
    handleDrag(e, type);
    const moveHandler = (moveEvent: any) => handleDrag(moveEvent, type);
    const upHandler = () => {
      window.removeEventListener('mousemove', moveHandler);
      window.removeEventListener('touchmove', moveHandler);
      window.removeEventListener('mouseup', upHandler);
      window.removeEventListener('touchend', upHandler);
    };
    window.addEventListener('mousemove', moveHandler);
    window.addEventListener('touchmove', moveHandler);
    window.addEventListener('mouseup', upHandler);
    window.addEventListener('touchend', upHandler);
  };

  return (
    <div className={styles.SearchSlider}>
      <div className={styles.SearchSlider__rail} ref={trackRef}>
        <div
          className={styles.SearchSlider__track}
          style={{
            left: `${getPercent(value[0])}%`,
            width: `${getPercent(value[1]) - getPercent(value[0])}%`,
          }}
        />
        <div
          className={styles.SearchSlider__thumb}
          style={{ left: `${getPercent(value[0])}%` }}
          onMouseDown={handleStart('min')}
          onTouchStart={handleStart('min')}
        />
        <div
          className={styles.SearchSlider__thumb}
          style={{ left: `${getPercent(value[1])}%` }}
          onMouseDown={handleStart('max')}
          onTouchStart={handleStart('max')}
        />
      </div>
    </div>
  );
};

export default memo(Slider);