Date and time input

'use client';

import * as React from 'react';
import { TooltipProvider } from '../tooltip/tooltip';
import { DateTimeInput } from './date-time-input';

const PAST_MEETING = '2025-01-10T09:00';
const NEXT_MEETING = '2028-04-16T10:30';
const pad = (n: number) => String(n).padStart(2, '0');
const nowIso = () => {
  const d = new Date();
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
};

export default function DateTimeInputDemo({ replay = 0 }: { replay?: number }) {
  const [meeting, setMeeting] = React.useState<string | null>(PAST_MEETING);
  const min = React.useMemo(nowIso, []);
  const past = meeting !== null && meeting < min;

  React.useEffect(() => {
    if (replay === 0) return;
    setMeeting(null);
    const timer = window.setTimeout(() => setMeeting(NEXT_MEETING), 500);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <TooltipProvider>
      <div className="flex w-full max-w-xs flex-col gap-6">
        <DateTimeInput label="Start date" locales="en-US" defaultValue="2028-04-16" />
        <DateTimeInput
          label="Reminder"
          locales="en-US"
          granularity="time"
          hourCycle={12}
          defaultValue="09:15"
        />
        <DateTimeInput
          label="Meeting"
          locales="en-US"
          granularity="datetime"
          min={min}
          value={meeting}
          onValueChange={setMeeting}
          helpText="Guests see this time in their own time zone."
          hint={past ? 'Enter a date and time in the future.' : 'Use your local time zone.'}
        />
      </div>
    </TooltipProvider>
  );
}