Conditions builder

let fields = [("status", "Status"), ("amount", "Amount due"), ("room", "Room"), ("hirer", "Hirer")]

let select = (~id, ~label, ~name, ~value, choices: array<(string, string)>) => {
  let options = choices->Array.map(((value, words)): KitReact.Roles.FormGroup.optionItem => {label: React.string(words), value, props: {}})
  let printed = choices->Array.find(((choice, _)) => choice == value)->Option.mapOr("", ((_, words)) => words)
  <KitReact.Roles.FormGroup id kind=Select label={React.string(label)} controlProps={{name: name}} controlValue=value options printedValue={React.string(printed)} />
}

let text = (~id, ~label, ~name, ~value, ~inputMode=?) =>
  <KitReact.Roles.FormGroup id  label={React.string(label)} controlProps={{name, ?inputMode}} controlValue=value printedValue={React.string(value)} kind=Text(Medium) />

let match_ = (~id, ~name, ~value) =>
  <KitReact.Roles.FormGroup
    id
    printedValue={React.string(value == "all" ? "All" : "Any")}
    label={React.string("Match")}
    kind={KitReact.Roles.SegmentedControl.controlSet({
      name,
      value,
      options: Two({value: "all", content: React.string("All")}, {value: "any", content: React.string("Any")}),
    })}
  />

@react.component
let make = () =>
  <KitReact.Roles.ConditionsBuilder
    id="react-rule"
    addState=Inert({id: "rule-add", words: [Text("Adding waits until these conditions are checked.")]})
    legend={React.string("Bookings to follow up")}
    match={match_(~id="react-rule-match", ~name="match", ~value="all")}
    conditions=[
      {
        key: "status",
        name: "Status",
        removeState: Inert({id: "rule-remove-status", words: [Text("Removing the status condition waits until it is checked.")]}),
        field: select(~id="react-rule-1-field", ~label="Condition 1 field", ~name="conditions[0][field]", ~value="status", fields),
        operator: select(~id="react-rule-1-operator", ~label="Condition 1 operator", ~name="conditions[0][operator]", ~value="is", [("is", "is"), ("is-not", "is not")]),
        value: select(~id="react-rule-1-value", ~label="Condition 1 value", ~name="conditions[0][value]", ~value="unpaid", [("unpaid", "Unpaid"), ("paid", "Paid"), ("cancelled", "Cancelled")]),
      },
      {
        key: "amount",
        name: "Amount due",
        field: select(~id="react-rule-2-field", ~label="Condition 2 field", ~name="conditions[1][field]", ~value="amount", fields),
        operator: select(~id="react-rule-2-operator", ~label="Condition 2 operator", ~name="conditions[1][operator]", ~value="more", [("is", "is"), ("more", "is more than"), ("less", "is less than")]),
        value: text(~id="react-rule-2-value", ~label="Condition 2 value", ~name="conditions[1][value]", ~value="500.00", ~inputMode="decimal"),
      },
    ]
    group={{
      addState: Inert({id: "rule-nested-add", words: [Text("Adding to this group waits until its conditions are checked.")]}),
      removeState: Inert({id: "rule-remove-group", words: [Text("Removing this group waits until its conditions are checked.")]}),
      match: match_(~id="react-rule-group-match", ~name="group[match]", ~value="any"),
      conditions: [
        {
          key: "room",
          name: "Room",
          field: select(~id="react-rule-group-1-field", ~label="Group condition 1 field", ~name="group[conditions][0][field]", ~value="room", fields),
          operator: select(~id="react-rule-group-1-operator", ~label="Group condition 1 operator", ~name="group[conditions][0][operator]", ~value="is", [("is", "is"), ("is-not", "is not")]),
          value: select(~id="react-rule-group-1-value", ~label="Group condition 1 value", ~name="group[conditions][0][value]", ~value="garden", [("garden", "Garden room"), ("hall", "Main hall")]),
        },
        {
          key: "hirer",
          name: "Hirer",
          field: select(~id="react-rule-group-2-field", ~label="Group condition 2 field", ~name="group[conditions][1][field]", ~value="hirer", fields),
          operator: select(~id="react-rule-group-2-operator", ~label="Group condition 2 operator", ~name="group[conditions][1][operator]", ~value="contains", [("is", "is"), ("contains", "contains")]),
          value: text(~id="react-rule-group-2-value", ~label="Group condition 2 value", ~name="group[conditions][1][value]", ~value="school"),
        },
      ],
    }}
    reading=[
      Text("Unpaid bookings over "),
      Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="500.00", ~currency="GBP")),
      Text(", in the Garden room or with a hirer whose name contains “school”."),
    ]
  />