Action menu

module Menu = KitReact.Menu

@react.component
let make = () =>
  <details>
    <summary> {React.string("An invoice's actions")} </summary>
    <KitReact.Roles.ActionMenu
      id="role-action-menu-invoice"
      label="More actions for this invoice"
      groups=[
        {
          items: [
            Menu.Item({name: "Edit", icon: KitReact.Icons.iconPencilSimple, keys: ["E"]}),
            Menu.Item({name: "Duplicate", icon: KitReact.Icons.iconCopy, keys: ["Ctrl", "D"]}),
            Menu.Item({name: "Send…", icon: KitReact.Icons.iconEnvelopeSimple}),
            Menu.Submenu({
              id: "role-action-menu-invoice-sort",
              name: "Sort lines",
              icon: KitReact.Icons.iconArrowsDownUp,
              groups: [
                {
                  items: [
                    Menu.Choice({name: "By date", chosen: true}),
                    Menu.Choice({name: "By amount", chosen: false}),
                    Menu.Choice({name: "By description", chosen: false}),
                  ],
                },
              ],
            }),
            Menu.Item({
              name: "Archive",
              icon: KitReact.Icons.iconArchive,
              reason: [KitReact.Words.Text("Only the invoice's owner can archive it.")],
            }),
          ],
        },
        {
          label: "Show",
          items: [
            Menu.Toggle({name: "Line totals", checked: true}),
            Menu.Toggle({name: "Notes", checked: false}),
          ],
        },
        {items: [Menu.Destructive({name: "Delete invoice", icon: KitReact.Icons.iconTrash})]},
      ]
    />
  </details>

module Menu = KitReact.Menu

let groups: array<Menu.group> = [
  {
    items: [
      Menu.Item({name: "Edit", icon: KitReact.Icons.iconPencilSimple, keys: ["E"]}),
      Menu.Item({name: "Duplicate", icon: KitReact.Icons.iconCopy, keys: ["Ctrl", "D"]}),
    ],
  },
  {items: [Menu.Destructive({name: "Delete invoice", icon: KitReact.Icons.iconTrash})]},
]

@react.component
let make = () =>
  <>
    <p className="specimen-case-line"> {React.string("An Action menu in a Row's actions, its trigger inert with its words.")} </p>
    <KitReact.Roles.Row
      subject={React.string("Invoice 1042")}
      subjectHref="#role-action-menu-inert"
      facts=[{key: "school", content: Words([KitReact.Words.Text("Oakmere Primary School · due "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2026, month: 10, day: 30}))]), props: {}}]
      actions=[
        KitReact.Roles.Row.SecondaryAction({children: React.string("Send reminder")}),
        KitReact.Roles.Row.ActionMenu(
          KitReact.Roles.ActionMenu.role({
            id: "role-action-menu-inert-row",
            label: "More actions for this invoice",
            groups,
            state: Inert({id: "role-action-menu-inert-row-trigger", words: [KitReact.Words.Text("A sent invoice can’t be changed until it is filed.")]}),
          }),
        ),
      ]
    />
    <p className="specimen-case-line"> {React.string("An Action menu alone, its trigger inert with its words directly after it.")} </p>
    <KitReact.Roles.ActionMenu
      id="role-action-menu-inert-alone"
      label="More actions for this invoice"
      groups
      state={Inert({id: "role-action-menu-inert-alone-trigger", words: [KitReact.Words.Text("A sent invoice can’t be changed until it is filed.")]})}
    />
  </>