Accordion

[<ReactComponent>]
let Accordion () =
    let openItems, setOpenItems = React.useState [1]

    let getIcon key =
        if openItems |> List.contains key then
            Fui.icon.subtractFilled []
        else
            Fui.icon.addFilled []

    Fui.accordion [
        accordion.collapsible true
        accordion.openItems openItems
        accordion.defaultOpenItems openItems
        accordion.onToggle (fun (i: AccordionToggleData<int>) -> setOpenItems (i.openItems |> Array.toList))
        accordion.multiple true
        accordion.children [
            Fui.accordionItem [
                accordionItem.key "a"
                accordionItem.value 1
                accordionItem.children [
                    Fui.accordionHeader [
                        accordionHeader.expandIcon (getIcon 1)
                        accordionHeader.expandIconPosition.end'
                        accordionHeader.children [
                            Fui.text "Header 1"
                        ]
                    ]
                    Fui.accordionPanel [
                        Fui.text "Panel 1"
                    ]
                ]
            ]
            Fui.accordionItem [
                accordionItem.key "b"
                accordionItem.value 2
                accordionItem.children [
                    Fui.accordionHeader [
                        accordionHeader.expandIcon (getIcon 2)
                        accordionHeader.children [
                            Fui.text "Header 2"
                        ]
                    ]
                    Fui.accordionPanel [
                        Fui.text "Panel 2"
                    ]
                ]
            ]
            Fui.accordionItem [
                accordionItem.key "c"
                accordionItem.value 3
                accordionItem.children [
                    Fui.accordionHeader [
                        accordionHeader.expandIcon (getIcon 3)
                        accordionHeader.children [
                            Fui.text "Header 3"
                        ]
                    ]
                    Fui.accordionPanel [
                        Fui.text "Panel 3"
                    ]
                ]
            ]
        ]
    ]