Wheel picker

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { Wheel, WheelPicker } from './wheel-picker';

const HOURS = Array.from({ length: 24 }, (_, i) => i);
const MINUTES = Array.from({ length: 12 }, (_, i) => i * 5);
// A past day stays in the list but cannot be picked.
const DAYS = [
  { value: 'monday', label: 'Monday', disabled: true },
  { value: 'today', label: 'Today' },
  { value: 'tomorrow', label: 'Tomorrow' },
  { value: 'friday', label: 'Friday' },
];
const START = { hours: 1, minutes: 30, day: 'today' };
const hourUnit = (h: number) => (h === 1 ? 'hour' : 'hours');

export default function WheelPickerDemo({ replay = 0 }: { replay?: number }) {
  const [hours, setHours] = React.useState(START.hours);
  const [minutes, setMinutes] = React.useState(START.minutes);
  const [day, setDay] = React.useState(START.day);
  const [saved, setSaved] = React.useState('');
  const timers = React.useRef<number[]>([]);

  const reset = React.useCallback(() => {
    setHours(START.hours);
    setMinutes(START.minutes);
    setDay(START.day);
    setSaved('');
  }, []);

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    reset();
    timers.current = [
      window.setTimeout(() => setHours(4), 700),
      window.setTimeout(() => setMinutes(15), 1500),
    ];
  }, [replay, reset]);

  React.useEffect(
    () => () => {
      for (const timer of timers.current) window.clearTimeout(timer);
    },
    [],
  );

  const dayLabel = DAYS.find((d) => d.value === day)?.label.toLowerCase() ?? '';

  return (
    <div className="flex w-full max-w-[386px] flex-col gap-6 rounded-2xl border border-secondary bg-primary p-8 shadow-xs">
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-semibold text-primary">Remind me in</h3>
        <p className="text-sm text-tertiary" aria-live="polite">
          {saved || 'You get a notification at that time.'}
        </p>
      </div>
      <WheelPicker aria-label="Reminder time">
        <Wheel label="Hours" options={HOURS} value={hours} onValueChange={setHours} unit={hourUnit} />
        <Wheel label="Minutes" options={MINUTES} value={minutes} onValueChange={setMinutes} loop unit="min" />
        <Wheel label="Day" options={DAYS} value={day} onValueChange={setDay} className="flex-[1.2]" />
      </WheelPicker>
      <div className="flex justify-end gap-3">
        <Button hierarchy="secondary" onClick={reset}>
          Cancel
        </Button>
        <Button
          onClick={() =>
            setSaved(`Reminder set: ${dayLabel}, in ${hours} ${hourUnit(hours)} ${minutes} min.`)
          }
        >
          Set reminder
        </Button>
      </div>
    </div>
  );
}