"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vdom_1 = require("@dojo/framework/core/vdom");
var theme_1 = require("../middleware/theme");
var floating_action_button_1 = require("../floating-action-button");
var fixedCss = require("./styles/speed-dial.m.css");
var css = require("../theme/default/speed-dial.m.css");
var fabCss = require("../theme/default/floating-action-button.m.css");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var icon_1 = require("../icon");
var actionFactory = vdom_1.create({ theme: theme_1.default }).properties();
exports.Action = actionFactory(function (_a) {
    var properties = _a.properties, children = _a.children, theme = _a.middleware.theme;
    var _b = properties(), onClick = _b.onClick, title = _b.title, variant = _b.variant, classes = _b.classes;
    var fab = (vdom_1.tsx(floating_action_button_1.default, { size: "small", title: title, theme: theme.compose(fabCss, css, 'action'), onClick: function () {
            onClick();
        }, classes: classes, variant: variant }, children()));
    return fab;
});
var icache = icache_1.createICacheMiddleware();
var factory = vdom_1.create({ theme: theme_1.default, icache: icache }).properties();
exports.SpeedDial = factory(function SpeedDial(_a) {
    var properties = _a.properties, children = _a.children, _b = _a.middleware, theme = _b.theme, icache = _b.icache;
    var _c = properties(), initialOpen = _c.initialOpen, _d = _c.direction, direction = _d === void 0 ? 'right' : _d, onOpen = _c.onOpen, onClose = _c.onClose, themeProp = _c.theme, classes = _c.classes, variant = _c.variant, _e = _c.delay, delay = _e === void 0 ? 30 : _e, _f = _c.iconType, iconType = _f === void 0 ? 'plusIcon' : _f;
    var themedCss = theme.classes(css);
    var open = properties().open;
    if (open === undefined) {
        open = icache.get('open');
        var existingInitialOpen = icache.get('initialOpen');
        if (initialOpen !== existingInitialOpen) {
            icache.set('open', initialOpen);
            icache.set('initialOpen', initialOpen);
            open = initialOpen;
        }
    }
    var actions = children();
    function toggleOpen() {
        var open = icache.get('open');
        if (!open) {
            icache.set('open', true);
            onOpen && onOpen();
        }
    }
    function toggleClose() {
        var open = icache.get('open');
        if (open) {
            icache.set('open', false);
            onClose && onClose();
        }
    }
    return (vdom_1.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
        ], onmouseleave: toggleClose },
        vdom_1.tsx(floating_action_button_1.default, { key: "trigger", theme: theme.compose(fabCss, css, 'trigger'), onOver: toggleOpen, onClick: function () {
                var open = icache.get('open');
                if (open) {
                    toggleClose();
                }
                else {
                    toggleOpen();
                }
            }, classes: classes, variant: variant },
            vdom_1.tsx(icon_1.default, { size: "large", theme: themeProp, type: iconType, classes: classes, variant: variant })),
        vdom_1.tsx("div", { key: "actions", classes: [themedCss.actions, open ? themedCss.open : undefined], onpointerdown: toggleClose }, actions.map(function (child, index) {
            var delayMultiplyer = open ? index : actions.length - index - 1;
            var calculatedDelay = delayMultiplyer * delay + "ms";
            return (vdom_1.tsx("div", { key: "action-wrapper-" + index, styles: { transitionDelay: calculatedDelay }, classes: [themedCss.action, themedCss.actionTransition] }, child));
        }))));
});
exports.default = exports.SpeedDial;

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