"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var i18n_1 = require("@dojo/framework/core/middleware/i18n");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var vdom_1 = require("@dojo/framework/core/vdom");
var icon_1 = require("../icon");
var TabContainer_1 = require("./nls/TabContainer");
var util_1 = require("../common/util");
var css = require("../theme/default/tab-container.m.css");
var factory = vdom_1.create({
    focus: focus_1.default,
    i18n: i18n_1.default,
    icache: icache_1.createICacheMiddleware(),
    theme: theme_1.default
}).properties();
exports.TabContainer = factory(function TabContainer(_a) {
    var children = _a.children, id = _a.id, _b = _a.middleware, focus = _b.focus, i18n = _b.i18n, icache = _b.icache, theme = _b.theme, properties = _a.properties;
    var _c = properties(), _d = _c.alignButtons, alignButtons = _d === void 0 ? 'top' : _d, _e = _c.aria, aria = _e === void 0 ? {} : _e, _f = _c.initialActiveIndex, initialActiveIndex = _f === void 0 ? 0 : _f, tabs = _c.tabs, onActiveIndex = _c.onActiveIndex, onClose = _c.onClose, themeProp = _c.theme, classes = _c.classes, variant = _c.variant;
    var activeIndex = properties().activeIndex;
    var themeCss = theme.classes(css);
    var messages = i18n.localize(TabContainer_1.default).messages;
    if (activeIndex === undefined) {
        activeIndex = icache.getOrSet('activeIndex', initialActiveIndex);
    }
    function closeTab(index) {
        onClose && onClose(index);
        setActiveIndex(0);
    }
    function setActiveIndex(index) {
        focus.focus();
        onActiveIndex && onActiveIndex(index);
        icache.set('activeIndex', index);
    }
    function onKeyDown(event, _a, index) {
        var closeable = _a.closeable, disabled = _a.disabled;
        event.stopPropagation();
        var total = tabs.length;
        switch (event.which) {
            case util_1.Keys.Escape:
                if (closeable && !disabled) {
                    closeTab(index);
                }
                break;
            case util_1.Keys.Left:
            case util_1.Keys.Up:
                event.preventDefault();
                setActiveIndex((index - 1 + total) % total);
                break;
            case util_1.Keys.Right:
            case util_1.Keys.Down:
                event.preventDefault();
                setActiveIndex((index + 1) % total);
                break;
            case util_1.Keys.Home:
                event.preventDefault();
                setActiveIndex(0);
                break;
            case util_1.Keys.End:
                event.preventDefault();
                setActiveIndex(tabs.length - 1);
                break;
        }
    }
    var renderTab = function (tab, index) {
        var closeable = tab.closeable, disabled = tab.disabled, name = tab.name;
        var active = index === activeIndex;
        return (vdom_1.tsx("div", { "aria-controls": id + "-tab-" + index, "aria-disabled": disabled ? 'true' : 'false', "aria-selected": active ? 'true' : 'false', classes: [
                themeCss.tabButton,
                active ? themeCss.activeTabButton : null,
                closeable ? themeCss.closeable : null,
                disabled ? themeCss.disabledTabButton : null
            ], focus: active ? focus.shouldFocus : function () { return false; }, id: id + "-tabbutton-" + index, key: index + "-tabbutton", onclick: function () {
                if (!disabled) {
                    setActiveIndex(index);
                }
            }, onkeydown: function (event) { return onKeyDown(event, tab, index); }, role: "tab", tabIndex: active ? 0 : -1 },
            vdom_1.tsx("span", { key: "tabButtonContent", classes: themeCss.tabButtonContent },
                name,
                closeable ? (vdom_1.tsx("button", { disabled: disabled, tabIndex: active ? 0 : -1, classes: themeCss.close, key: index + "-tabbutton-close", type: "button", onclick: function (event) {
                        event.stopPropagation();
                        if (!disabled) {
                            closeTab(index);
                        }
                    } },
                    vdom_1.tsx(icon_1.default, { type: "closeIcon", altText: messages.close, size: "small", theme: themeProp, classes: classes, variant: variant }))) : null,
                vdom_1.tsx("span", { classes: [themeCss.indicator, active && themeCss.indicatorActive] },
                    vdom_1.tsx("span", { classes: themeCss.indicatorContent })))));
    };
    var content = [
        vdom_1.tsx("div", { key: "buttons", classes: themeCss.tabButtons }, tabs.map(renderTab)),
        vdom_1.tsx("div", { key: "tabs", classes: themeCss.tabs }, children().map(function (child, index) {
            var disabled = tabs[index].disabled;
            var active = activeIndex === index && !disabled;
            return (vdom_1.tsx("div", { classes: active ? themeCss.tab : undefined, hidden: !active }, child));
        }))
    ];
    var alignClass;
    var orientation = 'horizontal';
    switch (alignButtons) {
        case 'right':
            alignClass = themeCss.alignRight;
            orientation = 'vertical';
            content.reverse();
            break;
        case 'bottom':
            alignClass = themeCss.alignBottom;
            content.reverse();
            break;
        case 'left':
            alignClass = themeCss.alignLeft;
            orientation = 'vertical';
            break;
    }
    return (vdom_1.tsx("div", tslib_1.__assign({}, util_1.formatAriaProperties(aria), { key: "root", "aria-orientation": orientation, classes: [theme.variant(), alignClass || null, themeCss.root], role: "tablist" }), content));
});
exports.default = exports.TabContainer;

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