Palette

open KitReact.Roles.Palette

let runs = Runs(() => ())

@react.component
let make = () => {
  let (query, setQuery) = React.useState(() => "")
  let matched = name => {
    let position = name->String.toLowerCase->String.indexOf(query->String.toLowerCase)
    position < 0 ? None : Some(query == "" ? [Plain(name)] : [Plain(name->String.slice(~start=0, ~end=position)), Matched(name->String.slice(~start=position, ~end=position + String.length(query))), Plain(name->String.slice(~start=position + String.length(query)))])
  }
  let actions = [
    ("mark-paid", "Mark as paid", KitReact.Icons.iconCheckCircle, ["P"], runs),
    ("change-status", "Change status", KitReact.Icons.iconTag, [], TakesValue),
    ("export", "Export", KitReact.Icons.iconExport, [], runs),
  ]->Array.filterMap(((key, name, icon, keys, effect)) => matched(name)->Option.map(name => {key, name, icon, keys, effect}))
  let commands = [
    ("go-invoices", "Go to invoices", KitReact.Icons.iconArrowRight, ["G", "I"]),
    ("new-invoice", "New invoice", KitReact.Icons.iconPlus, ["N"]),
  ]->Array.filterMap(((key, name, icon, keys)) => matched(name)->Option.map(name => {key, name, icon, keys, effect: runs}))
  <>
    <KitReact.Roles.Palette
      id="role-palette"
      label="Commands"
      placeholder="Type a command or a name"
      query
      selection="3 invoices"
      recent=?{query == "" ? Some({name: "Recent", lines: [{key: "send-reminder", name: [Plain("Send reminder")], icon: KitReact.Icons.iconEnvelopeSimple, effect: runs}]}) : None}
      actions={{name: "Actions", lines: actions}}
      commands={{name: "Commands", lines: commands}}
      searchFor={() => ()}
      onChange={request => setQuery(_ => request.query)}
    />
    <KitReact.Roles.Palette
      id="role-palette-in-flow"
      label="Commands"
      placeholder="Type a command or a name"
      query=""
      selection="3 invoices"
      recent={{name: "Recent", lines: [{key: "send-reminder", name: [Plain("Send reminder")], icon: KitReact.Icons.iconEnvelopeSimple, effect: runs}]}}
      actions={{name: "Actions", lines: [
        {key: "mark-paid", name: [Plain("Mark as paid")], icon: KitReact.Icons.iconCheckCircle, keys: ["P"], effect: runs},
        {key: "change-status", name: [Plain("Change status")], icon: KitReact.Icons.iconTag, effect: TakesValue},
        {key: "export", name: [Plain("Export")], icon: KitReact.Icons.iconExport, effect: runs},
      ]}}
      commands={{name: "Commands", lines: [
        {key: "go-invoices", name: [Plain("Go to invoices")], icon: KitReact.Icons.iconArrowRight, keys: ["G", "I"], effect: runs},
        {key: "new-invoice", name: [Plain("New invoice")], icon: KitReact.Icons.iconPlus, keys: ["N"], effect: runs},
      ]}}
      searchFor={() => ()}
      onChange={_ => ()}
      props={{open_: true}}
    />
    <p className="specimen-case-line">{React.string("A query, with its matches marked and Search for last.")}</p>
    <KitReact.Roles.Palette
      id="role-palette-with-query"
      label="Commands"
      placeholder="Type a command or a name"
      query="invoice"
      selection="3 invoices"
      commands={{name: "Commands", lines: [
        {key: "go-invoices", name: [Plain("Go to "), Matched("invoice"), Plain("s")], icon: KitReact.Icons.iconArrowRight, keys: ["G", "I"], effect: runs},
        {key: "new-invoice", name: [Plain("New "), Matched("invoice")], icon: KitReact.Icons.iconPlus, keys: ["N"], effect: runs},
      ]}}
      searchFor={() => ()}
      onChange={_ => ()}
      props={{open_: true}}
    />
    <p className="specimen-case-line">{React.string("A line waiting on its answer.")}</p>
    <KitReact.Roles.Palette
      id="role-palette-waiting"
      label="Commands"
      placeholder="Type a command or a name"
      query=""
      selection="3 invoices"
      commands={{name: "Commands", lines: [
        {key: "go-invoices", name: [Plain("Go to invoices")], icon: KitReact.Icons.iconArrowRight, keys: ["G", "I"], effect: runs, props: {ariaBusy: true}},
        {key: "new-invoice", name: [Plain("New invoice")], icon: KitReact.Icons.iconPlus, keys: ["N"], effect: runs},
      ]}}
      searchFor={() => ()}
      onChange={_ => ()}
      props={{open_: true}}
    />
  </>
}