"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var recompose_1 = require("recompose");
var get = require('lodash/get');
var assign = require('lodash/assign');
var asRendition_1 = require("../asRendition");
var utils_1 = require("../utils");
var theme_1 = require("../theme");
var transition = 'width linear 250ms';
var Bar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  background: ", ";\n  transition: ", ";\n  text-align: center;\n"], ["\n  position: relative;\n  height: ",
    ";\n  overflow: hidden;\n  background: ", ";\n  transition: ", ";\n  text-align: center;\n"])), function (props) {
    return utils_1.px(props.emphasized ? props.theme.space[5] : props.theme.space[4]);
}, function (props) { return props.bg; }, transition);
var LoadingContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  text-align: center;\n  color: #000;\n  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  text-align: center;\n  color: #000;\n  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);\n"])));
var Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: center;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transition: ", ";\n"], ["\n  text-align: center;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transition: ", ";\n"])), transition);
var Sleeve = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  border-radius: ", ";\n  height: ", ";\n  line-height: ", ";\n  background: ", ";\n  font-size: ", "em;\n  overflow: hidden;\n"], ["\n  position: relative;\n  border-radius: ", ";\n  height: ",
    ";\n  line-height: ",
    ";\n  background: ", ";\n  font-size: ", "em;\n  overflow: hidden;\n"])), utils_1.px(theme_1.radius), function (props) {
    return utils_1.px(props.emphasized ? props.theme.space[4] : props.theme.space[3]);
}, function (props) {
    return utils_1.px(props.emphasized ? props.theme.space[4] : props.theme.space[3]);
}, function (props) { return props.theme.colors.gray.light; }, function (props) { return (props.emphasized ? 1 : 0.6); });
var getType = recompose_1.withProps(function (props) {
    var type = Object.keys(props).find(function (b) {
        return Object.keys(props.theme.colors).find(function (k) { return k === b; });
    });
    return assign({}, props, { type: type });
});
var setTypeProps = recompose_1.withProps(function (_a) {
    var type = _a.type, theme = _a.theme;
    if (!type)
        return;
    return {
        color: '#fff',
        background: get(theme.colors[type], 'main')
    };
});
var Base = function (_a) {
    var children = _a.children, color = _a.color, background = _a.background, value = _a.value, props = __rest(_a, ["children", "color", "background", "value"]);
    return (React.createElement(Sleeve, __assign({}, props),
        React.createElement(LoadingContent, null, children),
        React.createElement(Bar, { bg: background, style: { width: value + "%" } },
            React.createElement(Content, { style: { width: (value && 100 * 100 / value) + "%" } }, children))));
};
exports.default = recompose_1.compose(styled_components_1.withTheme, getType, setTypeProps, asRendition_1.default)(Base);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
