Activity rings

'use client';

import * as React from 'react';
import { ActivityRings, type RingDay, type RingGoal } from './activity-rings';

const GOALS: RingGoal[] = [
  { id: 'move', label: 'Move', goal: 600, unit: 'kcal' },
  { id: 'exercise', label: 'Exercise', goal: 30, unit: 'min' },
  { id: 'stand', label: 'Stand', goal: 12, unit: 'h' },
];

const DAYS: RingDay[] = [
  { key: 'mon', label: 'Mon', title: 'Monday, Oct 5', values: [490, 22, 9] },
  { key: 'tue', label: 'Tue', title: 'Tuesday, Oct 6', values: [540, 25, 10] },
  { key: 'wed', label: 'Wed', title: 'Wednesday, Oct 7', values: [420, 18, 12] },
  { key: 'thu', label: 'Thu', title: 'Thursday, Oct 8', values: [570, 39, 8] },
  { key: 'fri', label: 'Fri', title: 'Friday, Oct 9', values: [305, 12, 6] },
  { key: 'sat', label: 'Sat', title: 'Saturday, Oct 10', values: [null, null, null] },
  { key: 'sun', label: 'Sun', title: 'Sunday, Oct 11', values: [null, null, null] },
];

/** Points a pretend pointer at a legend row, so Replay can show the dimming. */
function pointAtGoal(root: HTMLElement | null, index: number | null) {
  const rows = root?.querySelectorAll<HTMLElement>('[data-slot="activity-rings"] li');
  if (!rows) return;
  if (index === null) {
    rows[0]?.parentElement?.parentElement?.dispatchEvent(
      new PointerEvent('pointerleave', { bubbles: false }),
    );
    return;
  }
  rows[index]?.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false }));
}

export default function ActivityRingsDemo({ replay = 0 }: { replay?: number }) {
  const [day, setDay] = React.useState('thu');
  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const steps: [number, () => void][] = [
      [0, () => setDay('mon')],
      [1500, () => setDay('thu')],
      [3200, () => pointAtGoal(ref.current, 2)],
      [4600, () => pointAtGoal(ref.current, null)],
    ];
    const timers = steps.map(([at, run]) => window.setTimeout(run, at));
    return () => {
      for (const id of timers) window.clearTimeout(id);
    };
  }, [replay]);

  return (
    <div ref={ref} className="w-full max-w-[400px]">
      <ActivityRings goals={GOALS} days={DAYS} value={day} onValueChange={setDay} locales="en-US" />
    </div>
  );
}