Date field

let reader = Specimen_Reader.reader
let on = (year, month, day) => KitReact.Time.day(reader, {year, month, day})

let refusal = (committed: KitReact.Roles.DateField.committed) =>
  switch committed {
  | Unresolved(_) => Some(React.string("Type a date, such as 12 March or next Friday."))
  | Empty | Day(_) | Month(_) => None
  }

@react.component
let make = () => {
  let (booking, setBooking) = React.useState(() => None)
  let (paid, setPaid) = React.useState(() => None)
  let (delivery, setDelivery) = React.useState((): KitReact.Roles.DateField.committed => Unresolved("sometime soon"))
  <>
    <KitReact.Roles.FormGroup
      id="react-date-booking" printedValue={<time dateTime="2025-04-18"> {React.string("Friday, 18 April 2025")} </time>}
      label={React.string("Booking date")}
      help={React.string("Bookings start from today.")}
      error=?booking
      kind={KitReact.Roles.DateField.control({
        name: "booking_date",
        reader,
        value: Day(on(2025, 4, 18)),
        today: on(2025, 4, 9),
        direction: Forward,
        first: on(2025, 4, 9),
        onCommit: committed => setBooking(_ => refusal(committed)),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-date-paid" printedValue={React.string("No date given")}
      label={React.string("Paid on")}
      help={React.string("As shown on the bank statement.")}
      error=?paid
      kind={KitReact.Roles.DateField.control({
        name: "paid_on",
        reader,
        today: on(2025, 4, 9),
        direction: Backward,
        last: on(2025, 4, 9),
        onCommit: committed => setPaid(_ => refusal(committed)),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-date-delivery" printedValue={React.string("sometime soon")}
      label={React.string("Delivery date")}
      error=?{refusal(delivery)}
      kind={KitReact.Roles.DateField.control({
        name: "delivery_date",
        reader,
        value: delivery,
        today: on(2025, 4, 9),
        direction: Forward,
        first: on(2025, 4, 9),
        onCommit: committed => setDelivery(_ => committed),
      })}
    />
    <KitReact.Roles.FormGroup id="react-month-empty" label={React.string("Billing month")}  kind={KitReact.Roles.DateField.control({name: "billing_month", reader, grain: #month, today: on(2026, 9, 15), direction: Either})} />
    {[("first", "First billing month", 7), ("last", "Last billing month", 9)]->Array.map(((endName, label, month)) =>
      <KitReact.Roles.FormGroup key=endName id={"react-billing-" ++ endName} label={React.string(label)}  printedValue={<KitReact.Roles.Time value={KitReact.Time.month(reader, ~year=2026, ~month)} />} kind={KitReact.Roles.DateField.control({name: endName ++ "_billing_month", reader, grain: #month, value: Month(KitReact.Time.month(reader, ~year=2026, ~month)), today: on(2026, 9, 15), direction: Either})} />
    )->React.array}
    <KitReact.Roles.FormGroup
      id="react-date-booking-disabled"
      printedValue={<time dateTime="2025-04-18"> {React.string("Friday, 18 April 2025")} </time>}
      label={React.string("Booking date")}
      help={React.string("Only the owner can change this.")}
      kind={KitReact.Roles.DateField.control({name: "booking_date", reader, disabled: true, value: Day(on(2025, 4, 18)), today: on(2025, 4, 9), direction: Forward, first: on(2025, 4, 9)})}
    />
  </>
}

@react.component
let make = () => {
  let reader = Specimen_Reader.reader
  let on = (year, month, day) => KitReact.Time.day(reader, {year, month, day})
  <KitReact.Roles.FormGroup
    id="react-date-monday" printedValue={<time dateTime="2025-04-10"> {React.string("Thursday, 10 April 2025")} </time>}
    label={React.string("Booking date")}
    kind={KitReact.Roles.DateField.control({
      name: "booking_date",
      reader,
      value: Day(on(2025, 4, 10)),
      today: on(2025, 4, 9),
      direction: Forward,
      first: on(2025, 4, 9),
    })}
  />
}