時間の操作TimeTransportExperimental

"use client";

import * as React from "react";
import { TimeTransport } from "@gunjo/ui";

// 時計は TimeTransport の外。進めるのは呼び出し側です。
// サーバと最初の1フレームを合わせるため、時刻は effect の中で読みます。
const BASE = Date.UTC(2026, 8, 12, 3, 0, 0);
const CLOCK = new Intl.DateTimeFormat("en-GB", {
  timeZone: "Asia/Tokyo",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  hour12: false,
});

function formatClock(at) {
  return CLOCK.format(new Date(at));
}

export function Replay() {
  const [now, setNow] = React.useState(BASE);
  const [value, setValue] = React.useState(BASE);
  const [following, setFollowing] = React.useState(true);
  const [playing, setPlaying] = React.useState(false);
  const [speed, setSpeed] = React.useState(60);

  React.useEffect(() => {
    let last = Date.now();
    const id = window.setInterval(() => {
      const t = Date.now();
      const elapsed = t - last;
      last = t;
      setNow(t);
      setValue((v) => (playing ? v + elapsed * speed : following ? t : v));
    }, 200);
    return () => window.clearInterval(id);
  }, [playing, speed, following]);

  return (
    <TimeTransport
      value={value}
      now={now}
      onValueChange={(next) => { setFollowing(false); setValue(next); }}
      onReturnToNow={() => { setFollowing(true); setPlaying(false); setValue(now); }}
      playing={playing}
      onPlayingChange={setPlaying}
      // 速さの段には呼び出し側が名前をつけます。1× が1秒なのか1日なのかは
      // 部品には分かりません。
      speeds={[
        { value: 1, label: "1×" },
        { value: 60, label: "1分/秒" },
        { value: 3600, label: "1時間/秒" },
        { value: 86400, label: "1日/秒" },
      ]}
      speed={speed}
      onSpeedChange={setSpeed}
      // offset は符号つき。向きはアイコンが示すので、ラベルは大きさだけ。
      jumps={[
        { offset: -86400000, label: "1日" },
        { offset: -3600000, label: "1時間" },
        { offset: 3600000, label: "1時間" },
        { offset: 86400000, label: "1日" },
      ]}
      formatValue={(v) => formatClock(v)}
      secondary="2026-09-12 JST"
    />
  );
}