Multi-value picker

open KitReact.Roles.Palette

let urgent: KitReact.Roles.RecordPicker.record = {id: "l-urgent", name: [Plain("Urgent")]}
let warranty: KitReact.Roles.RecordPicker.record = {id: "l-warranty", name: [Plain("Warranty")]}

@react.component
let make = () =>
  <>
  <KitReact.Roles.FormGroup
    id="react-labels" printedValue={React.string("Urgent, Warranty")}
    label={React.string("Labels")}
    help={React.string("Labels help you find this job later.")}
    kind={KitReact.Roles.MultiValuePicker.control({
      name: "labels",
      set: Names({new: {kind: "label"}}),
      chosen: [urgent, warranty],
      recent: [
        urgent,
        warranty,
        {id: "l-repeat", name: [Plain("Repeat customer")]},
        {id: "l-parts", name: [Plain("Awaiting parts")]},
      ],
      none: [KitReact.Words.Text("No labels match.")],
      onQuery: _ => (),
    })}
  />
<KitReact.Roles.FormGroup
  id="react-labels-disabled" printedValue={React.string("Urgent, Warranty")}
  label={React.string("Labels")}
  help={React.string("Only the owner can change this.")}
  kind={KitReact.Roles.MultiValuePicker.control({
    name: "labels", set: Names({new: {kind: "label"}}), chosen: [urgent, warranty],
    recent: [urgent, warranty, {id: "l-repeat", name: [Plain("Repeat customer")]}, {id: "l-parts", name: [Plain("Awaiting parts")]}],
    none: [KitReact.Words.Text("No labels match.")], onQuery: _ => (), disabled: true,
  })}
/>
  </>

open KitReact.Roles.Palette

let urgent: KitReact.Roles.RecordPicker.record = {id: "l-urgent", name: [Plain("Urgent")]}

let recent: array<KitReact.Roles.RecordPicker.record> = [
  urgent,
  {id: "l-warranty", name: [Plain("Warranty")]},
  {id: "l-repeat", name: [Plain("Repeat customer")]},
  {id: "l-parts", name: [Plain("Awaiting parts")]},
]

@react.component
let make = () =>
  <KitReact.Roles.FormGroup
    id="react-labels-recent" printedValue={React.string("Urgent")}
    label={React.string("Labels")}
    kind={KitReact.Roles.MultiValuePicker.control({
      name: "labels",
      set: Names({new: {kind: "label"}}),
      chosen: [urgent],
      recent,
      none: [KitReact.Words.Text("No labels match.")],
      onQuery: _ => (),
    })}
  />

open KitReact.Roles.Palette

let matches: array<KitReact.Roles.RecordPicker.record> = [
  {id: "l-warranty", name: [Matched("Wa"), Plain("rranty")]},
  {id: "l-parts", name: [Plain("A"), Matched("wa"), Plain("iting parts")]},
  {id: "l-waste", name: [Matched("Wa"), Plain("ste collection")]},
]

@react.component
let make = () =>
  <KitReact.Roles.FormGroup
    id="react-labels-matches" printedValue={React.string("Urgent, Warranty")}
    label={React.string("Labels")}
    kind={KitReact.Roles.MultiValuePicker.control({
      name: "labels",
      set: Names({new: {kind: "label"}}),
      chosen: [Role_MultiValuePicker_Open.urgent, {id: "l-warranty", name: [Plain("Warranty")]}],
      matches,
      none: [KitReact.Words.Text("No labels match.")],
      onQuery: _ => (),
    })}
  />

let regular: KitReact.Roles.RecordPicker.record = {id: "t-regular", name: [Plain("Regular")], colour: "#27ae60"}
let drama: KitReact.Roles.RecordPicker.record = {
  id: "t-drama",
  name: [Plain("Harbourside Community Association Youth Theatre and Drama Club rehearsals")],
  colour: "#c0392b",
}

let recent: array<KitReact.Roles.RecordPicker.record> = [
  regular,
  {id: "t-wedding", name: [Plain("Wedding")], colour: "#8e44ad"},
  {id: "t-parking", name: [Plain("Needs parking")], colour: "#d35400"},
  drama,
]

@react.component
let make = () =>
  <KitReact.Roles.FormGroup
    id="react-tags" printedValue={React.string("Regular, Harbourside Community Association Youth Theatre and Drama Club rehearsals")}
    label={React.string("Tags")}
    kind={KitReact.Roles.MultiValuePicker.control({
      name: "tags",
      set: Tags({new: {kind: "tag"}}),
      chosen: [regular, drama],
      recent,
      none: [KitReact.Words.Text("No tags match.")],
      onQuery: _ => (),
    })}
  />