import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import FloatingActionButton from '../floating-action-button';
import * as fixedCss from './styles/speed-dial.m.css';
import * as css from '../theme/default/speed-dial.m.css';
import * as fabCss from '../theme/default/floating-action-button.m.css';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import Icon from '../icon';
import { isRenderResult } from '../common/util';
// Enum used to position the action label
export var LabelOrientation;
(function (LabelOrientation) {
    LabelOrientation["bottom"] = "bottom";
    LabelOrientation["left"] = "left";
    LabelOrientation["right"] = "right";
    LabelOrientation["top"] = "top";
})(LabelOrientation || (LabelOrientation = {}));
const actionFactory = create({ theme })
    .properties()
    .children();
export const Action = actionFactory(function Action({ properties, id, children, middleware: { theme } }) {
    const { labelOrientation = LabelOrientation.left, onClick, title, variant, classes } = properties();
    const themedCss = theme.classes(css);
    const [labelChild] = children();
    const labelId = `${id}-label`;
    const { icon, label = undefined } = isRenderResult(labelChild)
        ? { icon: labelChild }
        : labelChild;
    const fab = (tsx(FloatingActionButton, { size: "small", title: title, theme: theme.compose(fabCss, css, 'action'), onClick: onClick, classes: classes, variant: variant, aria: label
            ? {
                describedby: labelId
            }
            : undefined }, icon));
    if (label) {
        let orientationClass;
        switch (labelOrientation) {
            case LabelOrientation.top:
                orientationClass = themedCss.labelTop;
                break;
            case LabelOrientation.right:
                orientationClass = themedCss.labelRight;
                break;
            case LabelOrientation.bottom:
                orientationClass = themedCss.labelBottom;
                break;
            case LabelOrientation.left:
            default:
                orientationClass = themedCss.labelLeft;
                break;
        }
        return (tsx("div", { classes: [themedCss.labelContainer, orientationClass], key: "labelRoot" },
            tsx("label", { classes: themedCss.label, id: labelId }, label),
            fab));
    }
    return fab;
});
const icache = createICacheMiddleware();
const factory = create({ theme, icache }).properties();
export const SpeedDial = factory(function SpeedDial({ properties, children, middleware: { theme, icache } }) {
    const { initialOpen, position, onOpen, onClose, theme: themeProp, classes, variant, delay = 30, iconType = 'plusIcon' } = properties();
    const themedCss = theme.classes(css);
    let { open, direction } = properties();
    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;
        }
    }
    let positionClass;
    switch (position) {
        case 'bottom-left':
            positionClass = themedCss.bottomLeft;
            direction = direction || 'up';
            break;
        case 'bottom-center':
            positionClass = themedCss.bottomCenter;
            direction = direction || 'up';
            break;
        case 'left-center':
            positionClass = themedCss.leftCenter;
            direction = direction || 'right';
            break;
        case 'right-center':
            positionClass = themedCss.rightCenter;
            direction = direction || 'left';
            break;
        case 'top-left':
            positionClass = themedCss.topLeft;
            direction = direction || 'down';
            break;
        case 'top-right':
            positionClass = themedCss.topRight;
            direction = direction || 'down';
            break;
        case 'top-center':
            positionClass = themedCss.topCenter;
            direction = direction || 'down';
            break;
        case 'bottom-right':
        default:
            positionClass = themedCss.bottomRight;
            direction = direction || 'up';
            break;
    }
    const actions = children();
    function toggleOpen() {
        const open = icache.get('open');
        if (!open) {
            icache.set('open', true);
            onOpen && onOpen();
        }
    }
    function toggleClose() {
        const open = icache.get('open');
        if (open) {
            icache.set('open', false);
            onClose && onClose();
        }
    }
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themedCss.root,
            fixedCss.root,
            direction === 'left' && themedCss.left,
            direction === 'right' && themedCss.right,
            direction === 'down' && themedCss.down,
            direction === 'up' && themedCss.up,
            positionClass
        ], onmouseleave: toggleClose },
        tsx(FloatingActionButton, { key: "trigger", theme: theme.compose(fabCss, css, 'trigger'), onOver: toggleOpen, onClick: () => {
                const open = icache.get('open');
                if (open) {
                    toggleClose();
                }
                else {
                    toggleOpen();
                }
            }, classes: classes, variant: variant },
            tsx(Icon, { size: "large", theme: themeProp, type: iconType, classes: classes, variant: variant })),
        tsx("div", { key: "actions", classes: [themedCss.actions, open ? themedCss.open : undefined], onpointerdown: toggleClose }, actions.map((child, index) => {
            const delayMultiplyer = open ? index : actions.length - index - 1;
            const calculatedDelay = `${delayMultiplyer * delay}ms`;
            return (tsx("div", { key: `action-wrapper-${index}`, styles: { transitionDelay: calculatedDelay }, classes: [themedCss.action, themedCss.actionTransition] }, child));
        }))));
});
export default SpeedDial;

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