"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
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 util_1 = require("../common/util");
// Enum used to position the action label
var LabelOrientation;
(function (LabelOrientation) {
    LabelOrientation["bottom"] = "bottom";
    LabelOrientation["left"] = "left";
    LabelOrientation["right"] = "right";
    LabelOrientation["top"] = "top";
})(LabelOrientation = exports.LabelOrientation || (exports.LabelOrientation = {}));
var actionFactory = vdom_1.create({ theme: theme_1.default })
    .properties()
    .children();
exports.Action = actionFactory(function Action(_a) {
    var properties = _a.properties, id = _a.id, children = _a.children, theme = _a.middleware.theme;
    var _b = properties(), _c = _b.labelOrientation, labelOrientation = _c === void 0 ? LabelOrientation.left : _c, onClick = _b.onClick, title = _b.title, variant = _b.variant, classes = _b.classes;
    var themedCss = theme.classes(css);
    var _d = tslib_1.__read(children(), 1), labelChild = _d[0];
    var labelId = id + "-label";
    var _e = util_1.isRenderResult(labelChild)
        ? { icon: labelChild }
        : labelChild, icon = _e.icon, _f = _e.label, label = _f === void 0 ? undefined : _f;
    var fab = (vdom_1.tsx(floating_action_button_1.default, { size: "small", title: title, theme: theme.compose(fabCss, css, 'action'), onClick: onClick, classes: classes, variant: variant, aria: label
            ? {
                describedby: labelId
            }
            : undefined }, icon));
    if (label) {
        var orientationClass = void 0;
        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 (vdom_1.tsx("div", { classes: [themedCss.labelContainer, orientationClass], key: "labelRoot" },
            vdom_1.tsx("label", { classes: themedCss.label, id: labelId }, label),
            fab));
    }
    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, position = _c.position, onOpen = _c.onOpen, onClose = _c.onClose, themeProp = _c.theme, classes = _c.classes, variant = _c.variant, _d = _c.delay, delay = _d === void 0 ? 30 : _d, _e = _c.iconType, iconType = _e === void 0 ? 'plusIcon' : _e;
    var themedCss = theme.classes(css);
    var _f = properties(), open = _f.open, direction = _f.direction;
    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 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;
    }
    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,
            positionClass
        ], 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*/