import Set from '@dojo/framework/shim/Set';
import * as css from '../theme/default/accordion.m.css';
import * as titlePaneCss from '../theme/default/title-pane.m.css';
import TitlePane from '../title-pane';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
const icache = createICacheMiddleware();
const factory = create({
    icache,
    theme
})
    .properties()
    .children();
export const Accordion = factory(function Accordion({ middleware: { icache, theme }, properties, children }) {
    const themedCss = theme.classes(css);
    const { exclusive, panes, variant, classes } = properties();
    const openIndexes = icache.getOrSet('openIndexes', new Set());
    const onOpen = (index) => {
        if (exclusive) {
            icache.set('openIndexes', new Set([index]));
        }
        else {
            const openIndexes = icache.getOrSet('openIndexes', new Set());
            openIndexes.add(index);
            icache.set('openIndexes', openIndexes);
        }
    };
    const onClose = (index) => {
        const openIndexes = icache.getOrSet('openIndexes', new Set());
        openIndexes.delete(index);
        icache.set('openIndexes', openIndexes);
    };
    return (tsx("div", { classes: [theme.variant(), themedCss.root] }, panes.map((paneName, index) => {
        return (tsx(TitlePane, { key: `pane-${index}`, open: openIndexes.has(index), onOpen: () => {
                onOpen(index);
            }, onClose: () => {
                onClose(index);
            }, theme: theme.compose(titlePaneCss, css, 'pane'), classes: classes, variant: variant, name: paneName }, children()[index]));
    })));
});
export default Accordion;

/*# sourceMappingURL=index.mjs.map*/