Ratio balancer

'use client';

import * as React from 'react';
import { RatioBalancer, type RatioSegment } from './ratio-balancer';

const BUDGET: RatioSegment[] = [
  { id: 'rent', label: 'Rent', ratio: 45 },
  { id: 'savings', label: 'Savings', ratio: 30 },
  { id: 'fun', label: 'Fun', ratio: 25 },
];

/** Replay: drag the first divider until Rent has 55%, then press Arrow Left twice on the second divider. */
function runScript(root: HTMLElement, later: (ms: number, run: () => void) => void) {
  const dividers = () => root.querySelectorAll<HTMLElement>('[data-slot="ratio-divider"]');
  const pointer = (el: HTMLElement | undefined, type: string, x: number) =>
    el?.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, button: 0, clientX: x }));
  const key = (el: HTMLElement | undefined) =>
    el?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
  later(300, () => {
    const first = dividers()[0];
    if (!first) return;
    const segments = [...root.querySelectorAll('[data-slot="ratio-segment"]')];
    const span = segments.reduce((sum, el) => sum + el.getBoundingClientRect().width, 0);
    const x = first.getBoundingClientRect().left + 6;
    pointer(first, 'pointerdown', x);
    const steps = 12;
    for (let i = 1; i <= steps; i++)
      later(i * 40, () => pointer(first, 'pointermove', x + (span * 0.1 * i) / steps));
    later(steps * 40 + 200, () => pointer(first, 'pointerup', x + span * 0.1));
  });
  later(1700, () => key(dividers()[1]));
  later(2300, () => key(dividers()[1]));
}

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

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

  return (
    <div ref={area} className="w-full max-w-[480px]">
      {/* Replay mounts the balancer again, so the split starts from the same place. */}
      <RatioBalancer key={replay} label="Monthly budget" defaultSegments={BUDGET} minRatio={10} />
    </div>
  );
}