Range ruler

'use client';

import * as React from 'react';
import { RangeRuler } from './range-ruler';

/** Replay: drag the lower needle into the upper one (it is pushed and the pills join), then press End on the upper needle. */
function runScript(root: HTMLElement, later: (ms: number, run: () => void) => void) {
  const track = () => root.querySelector<HTMLElement>('[data-slot="range-track"]');
  const needle = (index: number) => root.querySelector<HTMLElement>(`[data-needle="${index}"]`);
  const xOf = (value: number) => {
    const rect = track()?.getBoundingClientRect();
    return rect ? rect.left + (value / 500) * rect.width : 0;
  };
  const pointer = (type: string, value: number) =>
    needle(0)?.dispatchEvent(
      new PointerEvent(type, { bubbles: true, pointerId: 1, button: 0, clientX: xOf(value) }),
    );
  later(300, () => pointer('pointerdown', 80));
  const steps = 18;
  for (let i = 1; i <= steps; i++) later(300 + i * 60, () => pointer('pointermove', 80 + (180 * i) / steps));
  later(300 + steps * 60 + 400, () => pointer('pointerup', 260));
  later(2600, () => needle(1)?.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true })));
}

export default function RangeRulerDemo({ replay = 0 }: { replay?: number }) {
  const area = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0 || !area.current) return;
    const timers: number[] = [];
    runScript(area.current, (ms, run) => timers.push(window.setTimeout(run, ms)));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div ref={area} className="w-full max-w-[480px]">
      {/* Replay mounts the ruler again, so the range starts from the same place. */}
      <RangeRuler
        key={replay}
        label="Price per night"
        min={0}
        max={500}
        step={10}
        minDistance={20}
        unit="USD"
        defaultValue={[80, 240]}
      />
    </div>
  );
}