Tree

open KitReact.Roles.Tree

let folder = KitReact.Icons.iconFolder
let document = KitReact.Icons.iconFileText
let region = KitReact.Icons.iconGlobe
let country = KitReact.Icons.iconMapPin
let href = "#role-tree"

let documents = [
  {
    id: "handbook",
    name: "Handbook",
    href,
    icon: folder,
    expanded: true,
    children: Loaded([
      {
        id: "policies",
        name: "Policies",
        href,
        icon: folder,
        expanded: true,
        children: Loaded([
          {id: "leave", name: "Leave", href, icon: document, current: true, children: Leaf},
          {id: "expenses", name: "Expenses", href, icon: document, children: Leaf},
        ]),
      },
      {id: "onboarding", name: "Onboarding", href, icon: document, children: Leaf},
    ]),
  },
  {id: "contracts", name: "Contracts", href, icon: folder, expanded: true, children: Loading},
  {id: "archive", name: "Archive", href, icon: folder, expanded: true, children: Failed},
  {id: "templates", name: "Templates", href, icon: folder, children: Unloaded},
  {id: "read-me", name: "Read me", href, icon: document, children: Leaf},
]

let regions = [
  {
    id: "europe",
    name: "Europe",
    href,
    icon: region,
    expanded: true,
    chosen: Mixed,
    children: Loaded([
      {id: "france", name: "France", href, icon: country, chosen: Chosen, children: Leaf},
      {id: "germany", name: "Germany", href, icon: country, chosen: Unchosen, children: Leaf},
      {id: "spain", name: "Spain", href, icon: country, chosen: Chosen, children: Leaf},
    ]),
  },
  {id: "asia", name: "Asia", href, icon: region, chosen: Unchosen, children: Unloaded},
]

@react.component
let make = () =>
  <>
    <KitReact.Roles.Tree
      id="react-tree-documents"
      label="Documents"
      items=documents
      onExpand={(_, _) => ()}
      failed=[KitReact.Words.Text("These documents couldn't load.")]
    />
    <form id="react-region-filters" />
    <KitReact.Roles.Tree
      id="react-tree-regions" label="Regions" items=regions onExpand={(_, _) => ()} selectionName="regions" form="react-region-filters"
    />
  </>