いちにちの帯DayBandExperimental

"use client";

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

// 既定の単位は「午前0時からの分」（min 0 / max 1440）。
// 実日付で使うなら min にその日の0時のエポックミリ秒、max に +86400000 を渡します。
const PHASES = [
  { start: 0, end: 260, label: "夜", color: "hsl(var(--gunjo-deepest))" },
  { start: 260, end: 322, label: "薄明", color: "hsl(var(--gunjo-deep))" },
  { start: 322, end: 1076, label: "昼", color: "hsl(var(--gunjo-bright))" },
  { start: 1076, end: 1138, label: "薄明", color: "hsl(var(--gunjo-deep))" },
  { start: 1138, end: 1440, label: "夜", color: "hsl(var(--gunjo-deepest))" },
];

// 日の出・日の入は呼び出し側が渡します。部品は天文計算を持ちません。
const MARKS = [
  { at: 322, label: "日の出 05:22", color: "warning" },
  { at: 1076, label: "日の入 17:56", color: "info" },
];

function clock(minutes) {
  const hh = String(Math.floor(minutes / 60)).padStart(2, "0");
  const mm = String(minutes % 60).padStart(2, "0");
  return `${hh}:${mm}`;
}

export function SunBand() {
  const [value, setValue] = React.useState(640);
  // いまの時刻を描画中に読まないこと。effect の中で読みます。
  const [nowMinutes, setNowMinutes] = React.useState(undefined);

  React.useEffect(() => {
    const at = new Date();
    setNowMinutes(at.getHours() * 60 + at.getMinutes());
  }, []);

  return (
    <DayBand
      value={value}
      onValueChange={setValue}
      phases={PHASES}
      marks={MARKS}
      now={nowMinutes}
      label="東京　9月12日"
      hint={clock(value)}
      labels={{ band: "いちにちの中の時刻", now: "いま" }}
    />
  );
}

// TimeTransport の掴んで動かす面として差し込む場合
export function BandInTransport() {
  const [value, setValue] = React.useState(640);

  return (
    <TimeTransport
      value={value}
      now={640}
      onValueChange={setValue}
      liveTolerance={1}
      formatValue={clock}
      scrubber={
        <DayBand value={value} now={640} onValueChange={setValue} phases={PHASES} />
      }
    />
  );
}