"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var vdom_1 = require("@dojo/framework/core/vdom");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var i18n_1 = require("@dojo/framework/core/middleware/i18n");
var SlidePane_1 = require("./nls/SlidePane");
var fixedCss = require("./styles/slide-pane.m.css");
var css = require("../theme/default/slide-pane.m.css");
var util_1 = require("@dojo/framework/core/util");
var util_2 = require("../common/util");
var icon_1 = require("../icon");
var animations = require("../common/styles/animations.m.css");
/**
 * The default width of the slide pane
 */
var DEFAULT_WIDTH = 320;
var Plane;
(function (Plane) {
    Plane[Plane["x"] = 0] = "x";
    Plane[Plane["y"] = 1] = "y";
})(Plane || (Plane = {}));
var Slide;
(function (Slide) {
    Slide[Slide["in"] = 0] = "in";
    Slide[Slide["out"] = 1] = "out";
})(Slide || (Slide = {}));
var factory = vdom_1.create({
    icache: icache_1.createICacheMiddleware(),
    theme: theme_1.default,
    i18n: i18n_1.default
})
    .properties()
    .children();
exports.SlidePane = factory(function SlidePane(_a) {
    var _b = _a.middleware, icache = _b.icache, theme = _b.theme, i18n = _b.i18n, properties = _a.properties, children = _a.children;
    var _c = properties(), _d = _c.aria, aria = _d === void 0 ? {} : _d, closeText = _c.closeText, _e = _c.open, open = _e === void 0 ? false : _e, _f = _c.align, align = _f === void 0 ? 'left' : _f, _g = _c.width, width = _g === void 0 ? DEFAULT_WIDTH : _g, _h = _c.underlay, underlay = _h === void 0 ? false : _h, themeProp = _c.theme, variant = _c.variant, classes = _c.classes;
    var themeCss = theme.classes(css);
    var _j = tslib_1.__read(children(), 1), _k = _j[0], slidePaneChildren = _k === void 0 ? {} : _k;
    var title = slidePaneChildren.title, content = slidePaneChildren.content;
    if (icache.get('open') !== open) {
        var wasOpen = icache.get('open');
        icache.set('open', open);
        if (open && !wasOpen) {
            icache.set('slide', Slide.in);
        }
        else if (!open && wasOpen) {
            icache.set('slide', Slide.out);
        }
    }
    var plane = align === 'left' || align === 'right' ? Plane.x : Plane.y;
    var translate = '';
    var translateAxis = plane === Plane.x ? 'X' : 'Y';
    if (icache.get('swiping')) {
        translate =
            align === 'left' || align === 'top'
                ? "-" + icache.getOrSet('transform', 0)
                : "" + icache.getOrSet('transform', 0);
    }
    var contentStyles = {
        transform: translate ? "translate" + translateAxis + "(" + translate + "%)" : undefined,
        width: plane === Plane.x ? width + "px" : undefined,
        height: plane === Plane.y ? width + "px" : undefined
    };
    var alignCss = themeCss;
    var slide = icache.get('slide');
    var contentClasses = [
        alignCss[align],
        open ? themeCss.open : null,
        slide === Slide.in ? themeCss.slideIn : null,
        slide === Slide.out ? themeCss.slideOut : null
    ];
    var fixedAlignCss = fixedCss;
    var fixedContentClasses = [fixedAlignCss[align + "Fixed"]];
    if (!closeText) {
        var messages = i18n.localize(SlidePane_1.default).messages;
        closeText = messages.close + " " + title;
    }
    var getDelta = function (event, eventType) {
        var _a = properties().align, align = _a === void 0 ? 'left' : _a;
        var plane = align === 'left' || align === 'right' ? Plane.x : Plane.y;
        if (plane === Plane.x) {
            var currentX = event.pageX;
            return align === 'right'
                ? currentX - icache.getOrSet('initialPosition', 0)
                : icache.getOrSet('initialPosition', 0) - currentX;
        }
        else {
            var currentY = event.pageY;
            return align === 'bottom'
                ? currentY - icache.getOrSet('initialPosition', 0)
                : icache.getOrSet('initialPosition', 0) - currentY;
        }
    };
    var swipeStart = function (event) {
        var _a = properties().align, align = _a === void 0 ? 'left' : _a;
        var plane = align === 'left' || align === 'right' ? Plane.x : Plane.y;
        event.stopPropagation();
        icache.set('swiping', true);
        // Cache initial pointer position
        if (plane === Plane.x) {
            icache.set('initialPosition', event.pageX);
        }
        else {
            icache.set('initialPosition', event.pageY);
        }
        // Clear out the last transform applied
        icache.set('transform', 0);
    };
    var swipeMove = function (event) {
        event.stopPropagation();
        // Ignore pointer movement when not swiping
        if (!icache.get('swiping')) {
            return;
        }
        event.preventDefault();
        icache.set('hasMoved', true);
        var _a = properties().width, width = _a === void 0 ? DEFAULT_WIDTH : _a;
        var delta = getDelta(event, 'touchmove');
        // Prevent pane from sliding past screen edge
        if (delta >= 0) {
            icache.set('transform', (100 * delta) / width);
            icache.set('slide', undefined);
        }
    };
    var swipeEnd = function (event) {
        event.stopPropagation();
        icache.set('swiping', false);
        icache.set('hasMoved', false);
        var _a = properties(), onRequestClose = _a.onRequestClose, _b = _a.width, width = _b === void 0 ? DEFAULT_WIDTH : _b;
        var delta = getDelta(event, 'touchend');
        // If the pane was swiped far enough to close
        if (delta > width / 2) {
            onRequestClose && onRequestClose();
        }
        // If pane was not swiped far enough to close
        else if (delta > 0) {
            // Animate the pane back open
            icache.set('slide', Slide.in);
        }
    };
    var onCloseClick = function (event) {
        event.stopPropagation();
        var onRequestClose = properties().onRequestClose;
        onRequestClose && onRequestClose();
    };
    var onUnderlayMouseUp = function () {
        var onRequestClose = properties().onRequestClose;
        if (icache.getOrSet('hasMoved', false) === false) {
            onRequestClose && onRequestClose();
        }
    };
    var titleId = icache.getOrSet('titleId', util_1.uuid());
    return (vdom_1.tsx("div", { "aria-labelledby": titleId, classes: [theme.variant(), themeCss.root], onpointerdown: swipeStart, onpointermove: swipeMove, onpointerup: swipeEnd, onpointercancel: swipeEnd },
        open ? (vdom_1.tsx("div", { key: "underlay", classes: [underlay ? themeCss.underlayVisible : null, fixedCss.underlay], enterAnimation: animations.fadeIn, exitAnimation: animations.fadeOut, onpointerup: onUnderlayMouseUp })) : null,
        vdom_1.tsx("div", tslib_1.__assign({}, util_2.formatAriaProperties(aria), { key: "content", classes: tslib_1.__spread([
                themeCss.pane
            ], contentClasses, [
                fixedCss.paneFixed
            ], fixedContentClasses), styles: contentStyles }),
            title ? (vdom_1.tsx("div", { classes: themeCss.title, key: "title" },
                vdom_1.tsx("div", { id: titleId, classes: themeCss.titleContent }, title),
                vdom_1.tsx("button", { classes: themeCss.close, type: "button", onclick: onCloseClick },
                    closeText,
                    vdom_1.tsx("span", { classes: themeCss.closeIcon },
                        vdom_1.tsx(icon_1.default, { type: "closeIcon", theme: themeProp, classes: classes, variant: variant }))))) : null,
            vdom_1.tsx("div", { classes: [themeCss.content, fixedCss.contentFixed] }, content))));
});
exports.default = exports.SlidePane;

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