Number field

let reader = Specimen_Reader.reader

@module({from: "kit/react/locales/en-IN.json", with: {type_: "json"}})
external enIN: KitReact.Locale.t = "default"

let kolkata = KitReact.Reader.make(~locale=enIN, ~zone="Asia/Kolkata")

let refusal = (committed: KitReact.Roles.NumberField.committed, ~min, ~max, ~words) =>
  switch committed {
  | Decimal(decimal) =>
    switch Float.fromString(decimal) {
    | Some(number) if number < min || number > max => Some(React.string(words))
    | _ => None
    }
  | Unresolved(_) => Some(React.string("Enter a number."))
  | Empty => None
  }

@react.component
let make = () => {
  let (price, setPrice) = React.useState(() => None)
  let (weight, setWeight) = React.useState(() => None)
  let (guests, setGuests) = React.useState(() => None)
  let (seats, setSeats) = React.useState(() => Some(React.string("Enter 30 seats or fewer.")))
  <>
    <KitReact.Roles.FormGroup
      id="react-number-price" printedValue={React.string("£1,250.00")}
      label={React.string("Price")}
      help={React.string("Before tax.")}
      error=?price
      kind={KitReact.Roles.NumberField.control({width: Short,
        name: "price",
        reader,
        value: "1250.00",
        measure: Currency("GBP"),
        onValue: value => switch value { | Decimal(_) | Empty => setPrice(_ => None) | Unresolved(_) => () },
        onCommit: committed =>
          setPrice(_ =>
            switch committed {
            | Unresolved(_) => Some(React.string("Enter a price."))
            | Empty | Decimal(_) => None
            }
          ),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-number-weight" printedValue={React.string("2.5 kg")}
      label={React.string("Weight")}
      help={React.string("From 0.5 to 30 kg.")}
      error=?weight
      kind={KitReact.Roles.NumberField.control({width: Short,
        name: "weight",
        reader,
        value: "2.5",
        measure: Unit(#kilogram),
        fraction: true,
        step: 0.5,
        min: 0.5,
        max: 30.,
        onValue: value => if refusal(value, ~min=0.5, ~max=30., ~words="Enter 0.5 to 30 kg.") == None { setWeight(_ => None) },
        onCommit: committed => setWeight(_ => refusal(committed, ~min=0.5, ~max=30., ~words="Enter 0.5 to 30 kg.")),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-number-guests" printedValue={React.string("1")}
      label={React.string("Guests")}
      help={React.string("From 1 to 12 guests.")}
      error=?guests
      kind={KitReact.Roles.NumberField.control({width: Short,
        name: "guests",
        reader,
        value: "1",
        step: 1.,
        min: 1.,
        max: 12.,
        onValue: value => if refusal(value, ~min=1., ~max=12., ~words="Enter 1 to 12 guests.") == None { setGuests(_ => None) },
        onCommit: committed => setGuests(_ => refusal(committed, ~min=1., ~max=12., ~words="Enter 1 to 12 guests.")),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-number-seats" printedValue={React.string("40")}
      label={React.string("Seats")}
      help={React.string("From 1 to 30 seats.")}
      error=?seats
      kind={KitReact.Roles.NumberField.control({width: Short,
        name: "seats",
        reader,
        value: "40",
        step: 1.,
        min: 1.,
        max: 30.,
        onValue: value => if refusal(value, ~min=1., ~max=30., ~words="Enter 30 seats or fewer.") == None { setSeats(_ => None) },
        onCommit: committed => setSeats(_ => refusal(committed, ~min=1., ~max=30., ~words="Enter 30 seats or fewer.")),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-number-deposit" printedValue={React.string("₹2,50,000.00")}
      label={React.string("Deposit")}
      help={React.string("Held until the stay ends.")}
      kind={KitReact.Roles.NumberField.control({width: Short, name: "deposit", reader: kolkata, value: "250000.00", measure: Currency("INR")})}
    />
    <KitReact.Roles.FormGroup
      id="react-number-discount" printedValue={React.string("15%")}
      label={React.string("Discount")}
      help={React.string("Off the nightly rate.")}
      kind={KitReact.Roles.NumberField.control({width: Short, name: "discount", reader: kolkata, value: "15", measure: Unit(#percent)})}
    />
    <KitReact.Roles.FormGroup
      id="react-number-level" printedValue={React.string("3.5")}
      label={React.string("Level")}
      help={React.string("As the studio grades it.")}
      kind={KitReact.Roles.NumberField.control({width: Short, name: "level", reader, value: "3.5", fraction: true})}
    />
    <KitReact.Roles.FormGroup
      id="react-number-warm-up" printedValue={React.string("1 min")}
      label={React.string("Warm-up")}
      help={React.string("From 1 to 20 min.")}
      kind={KitReact.Roles.NumberField.control({width: Short, name: "warm-up", reader, value: "1", measure: Named("min"), step: 1., min: 1., max: 20.})}
    />
  <KitReact.Roles.FormGroup
    id="react-number-weight-disabled" printedValue={React.string("2.5 kg")}
    label={React.string("Weight")}
    help={React.string("Only the owner can change this. From 0.5 to 30 kg.")}
    kind={KitReact.Roles.NumberField.control({width: Short,
      name: "weight", reader, value: "2.5", measure: Unit(#kilogram), fraction: true,
      step: 0.5, min: 0.5, max: 30., disabled: true,
    })}
  />
  </>
}