Menu

[<ReactComponent>]
let MenuTest() =
    let checkedValues, setCheckedValues = React.useState([ "data", [| "add" |]; "info", [| "filterInfo" |] ])
    let isOpen, setIsOpen = React.useState false
    let AddIcon = Fui.bundleIcon (bundleIcon.addCircleFilled, bundleIcon.addCircleRegular)
    let DataIcon = Fui.bundleIcon (bundleIcon.dataAreaFilled, bundleIcon.dataAreaRegular)
    let FunnelIcon = Fui.bundleIcon (bundleIcon.dataFunnelFilled, bundleIcon.dataFunnelRegular)

    Fui.menu [
        menu.checkedValues checkedValues
        menu.open' isOpen
        menu.positioning [
            positioning.coverTarget true
        ]
        menu.onOpenChange (fun (d: MenuOpenChangeData) -> setIsOpen d.``open``)
        menu.onCheckedValueChange (fun (_: MouseEvent) (d:MenuCheckedValueChangeData) ->
            setCheckedValues([ d.name, d.checkedItems ] |> List.append checkedValues)
        )
        menu.children [
            Fui.menuTrigger [
                menuTrigger.disableButtonEnhancement true
                menuTrigger.children (
                    Fui.button [
                        button.text "Toggle menu"
                    ]
                )
            ]
            Fui.menuPopover [
                Fui.menuList [
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (AddIcon [])
                        menuItemCheckbox.name "data"
                        menuItemCheckbox.value "add"
                        menuItemCheckbox.children [
                            Fui.text "Add Data"
                        ]
                    ]
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (DataIcon [])
                        menuItemCheckbox.name "data"
                        menuItemCheckbox.value "trends"
                        menuItemCheckbox.children [
                            Fui.text "Show Trends"
                        ]
                    ]
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (FunnelIcon [])
                        menuItemCheckbox.name "data"
                        menuItemCheckbox.value "filter"
                        menuItemCheckbox.children [
                            Fui.text "Filter Data"
                        ]
                    ]
                    Fui.menuDivider []
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (AddIcon [])
                        menuItemCheckbox.name "info"
                        menuItemCheckbox.value "addInfo"
                        menuItemCheckbox.children [
                            Fui.text "Add Info"
                        ]
                    ]
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (DataIcon [])
                        menuItemCheckbox.name "info"
                        menuItemCheckbox.value "infoTrends"
                        menuItemCheckbox.children [
                            Fui.text "Show Info Trends"
                        ]
                    ]
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.icon (FunnelIcon [])
                        menuItemCheckbox.name "info"
                        menuItemCheckbox.value "filterInfo"
                        menuItemCheckbox.children [
                            Fui.text "Filter Info"
                        ]
                    ]
                    Fui.menuItemCheckbox [
                        menuItemCheckbox.disabled true
                        menuItemCheckbox.icon (Fui.icon.editFilled [])
                        menuItemCheckbox.name "disabled"
                        menuItemCheckbox.value "disabled"
                        menuItemCheckbox.children [
                            Fui.text "Show Debug Panel"
                        ]
                    ]
                    Fui.menuDivider []
                    Fui.menu [
                        menu.children [
                            Fui.menuSplitGroup [
                                Fui.menuItem "Open"
                                Fui.menuTrigger [
                                    menuTrigger.disableButtonEnhancement true
                                    menuTrigger.children (
                                        Fui.menuItem [
                                            menuItem.ariaLabel "Open on platform"
                                        ]
                                    )
                                ]
                            ]
                            Fui.menuPopover [
                                menuPopover.children [
                                    Fui.menuList [
                                        Fui.menuItem "In Browser"
                                        Fui.menuItem "In Desktop App"
                                        Fui.menuItem "In Mobile"
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]