Time field

let reader = Specimen_Reader.reader
let paris = KitReact.Reader.atPlace(reader, ~zone="Europe/Paris")
let at = (hour, minute) => KitReact.Time.clock(reader, {hour, minute})
let atParis = iso => KitReact.Time.timeOfDay(paris, Date.fromString(iso))

let refusal = (committed: KitReact.Roles.TimeField.committed) =>
  switch committed {
  | Unresolved(_) => Some(React.string("Type a time, such as 930 or 9.30pm."))
  | Empty | Clock(_) => None
  }

@react.component
let make = () => {
  let (collection, setCollection) = React.useState((): KitReact.Roles.TimeField.committed => Clock(at(19, 30)))
  let (refused, setRefused) = React.useState((): KitReact.Roles.TimeField.committed => Unresolved("half nine"))
  let (hours, setHours) = React.useState(() => None)
  <>
    <KitReact.Roles.FormGroup
      id="react-time-collection" printedValue={<time dateTime="19:30"> {React.string("19:30")} </time>}
      label={React.string("Collection time")}
      help={React.string("Collections run until 21:00.")}
      error=?{refusal(collection)}
      kind={KitReact.Roles.TimeField.control({
        name: "collection_time",
        reader,
        value: collection,
        onCommit: committed => setCollection(_ => committed),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-time-hours" printedValue={<KitReact.Roles.Time value={KitReact.Time.intervalWithDay(reader, ~start=Date.fromString("2025-04-18T21:00:00Z"), ~end=Date.fromString("2025-04-19T00:30:00Z"))} />}
      label={React.string("Opening hours")}
      error=?hours
      kind={KitReact.Roles.TimeField.controlSet({
        name: "hours",
        reader,
        value: Clock(at(22, 0)),
        end: Clock(at(1, 30)),
        day: KitReact.Time.day(reader, {year: 2025, month: 4, day: 18}),
        onPairCommit: ({start, end}) => setHours(_ => refusal(start)->Option.orElse(refusal(end))),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-time-refused" printedValue={React.string("half nine")}
      label={React.string("Collection time")}
      error=?{refusal(refused)}
      kind={KitReact.Roles.TimeField.control({
        name: "collection_time",
        reader,
        value: refused,
        onCommit: committed => setRefused(_ => committed),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-time-shift" printedValue={<KitReact.Roles.Time value={KitReact.Time.intervalWithDay(reader, ~start=Date.fromString("2025-03-29T21:00:00Z"), ~end=Date.fromString("2025-03-30T04:00:00Z"), ~place="Europe/Paris")} />}
      label={React.string("Night shift")}
      kind={KitReact.Roles.TimeField.controlSet({
        name: "shift",
        reader: paris,
        value: Clock(atParis("2025-03-29T21:00:00Z")),
        end: Clock(atParis("2025-03-30T04:00:00Z")),
        day: KitReact.Time.day(paris, {year: 2025, month: 3, day: 29}),
      })}
    />
  <KitReact.Roles.FormGroup
    id="react-time-collection-disabled" printedValue={<time dateTime="19:30"> {React.string("19:30")} </time>}
    label={React.string("Collection time")}
    help={React.string("Only the owner can change this.")}
    kind={KitReact.Roles.TimeField.control({name: "collection_time", reader, value: Clock(at(19, 30)), disabled: true})}
  />
  <KitReact.Roles.FormGroup
    id="react-time-hours-disabled" printedValue={<KitReact.Roles.Time value={KitReact.Time.intervalWithDay(reader, ~start=Date.fromString("2025-04-18T21:00:00Z"), ~end=Date.fromString("2025-04-19T00:30:00Z"))} />}
    label={React.string("Opening hours")}
    help={React.string("Only the owner can change this.")}
    kind={KitReact.Roles.TimeField.controlSet({
      name: "hours", reader, value: Clock(at(22, 0)), end: Clock(at(1, 30)),
      day: KitReact.Time.day(reader, {year: 2025, month: 4, day: 18}), disabled: true,
    })}
  />
  </>
}

let reader = Specimen_Reader.reader
let at = (hour, minute) => KitReact.Time.clock(reader, {hour, minute})

@react.component
let make = () => {
  <KitReact.Roles.FormGroup
    id="react-time-open-meeting" printedValue={<time dateTime="2025-04-18T14:00"> {KitReact.TimeParts.elements(["14:00 – ", "15:30"])} </time>}
    label={React.string("Meeting")}
    kind={KitReact.Roles.TimeField.controlSet({
      name: "meeting",
      reader,
      value: Clock(at(14, 0)),
      end: Clock(at(15, 30)),
      day: KitReact.Time.day(reader, {year: 2025, month: 4, day: 18}),
    })}
  />
}