import dimensions from '@dojo/framework/core/middleware/dimensions';
import focus from '@dojo/framework/core/middleware/focus';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { create, tsx } from '@dojo/framework/core/vdom';
import Icon from '../icon';
import theme from '../middleware/theme';
import * as css from '../theme/default/title-pane.m.css';
import * as fixedCss from './styles/title-pane.m.css';
const factory = create({
    dimensions,
    focus,
    icache: createICacheMiddleware(),
    theme
}).properties();
export const TitlePane = factory(function TitlePane({ id, children, properties, middleware: { dimensions, focus, icache, theme } }) {
    const themeCss = theme.classes(css);
    const { closeable = true, headingLevel, initialOpen, onClose, onOpen, name, theme: themeProp, classes, variant } = properties();
    let { open } = properties();
    const firstRender = icache.get('open') === undefined;
    if (open === undefined) {
        open = icache.get('open');
        const existingInitialOpen = icache.get('initialOpen');
        if (initialOpen !== existingInitialOpen) {
            icache.set('open', initialOpen);
            icache.set('initialOpen', initialOpen);
            open = initialOpen;
        }
    }
    return (tsx("div", { classes: [
            theme.variant(),
            themeCss.root,
            open ? themeCss.open : null,
            fixedCss.rootFixed
        ] },
        tsx("div", { "aria-level": headingLevel ? `${headingLevel}` : undefined, classes: [
                themeCss.title,
                closeable ? themeCss.closeable : null,
                fixedCss.titleFixed,
                closeable ? fixedCss.closeableFixed : null
            ], role: "heading" },
            tsx("button", { "aria-controls": `${id}-content`, "aria-expanded": open ? 'true' : 'false', disabled: !closeable, classes: [fixedCss.titleButtonFixed, themeCss.titleButton], focus: focus.isFocused('title-button'), key: "title-button", onclick: (event) => {
                    event.stopPropagation();
                    icache.set('open', !open);
                    if (open) {
                        onClose && onClose();
                    }
                    else {
                        onOpen && onOpen();
                    }
                }, type: "button" },
                tsx("span", { classes: themeCss.arrow },
                    tsx(Icon, { type: open ? 'downIcon' : 'rightIcon', theme: themeProp, classes: classes, variant: variant })),
                name)),
        tsx("div", { "aria-hidden": open ? undefined : 'true', "aria-labelledby": `${id}-title`, classes: [
                themeCss.content,
                !firstRender && themeCss.contentTransition,
                fixedCss.contentFixed
            ], id: `${id}-content`, key: "content", styles: {
                marginTop: open ? '0px' : `-${dimensions.get('content').offset.height}px`
            } }, children())));
});
export default TitlePane;

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