"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __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;
    };
    return __assign.apply(this, arguments);
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
var classnames = require("classnames");
var PropTypes = require("prop-types");
var React = require("react");
var flex_1 = require("../flex");
var Progress_1 = require("./Progress");
require("./ProgressBar.less");
var Size = {
    THIN: "thin",
    MEDIUM: "medium",
    THICK: "thick",
};
var ShowLabel = {
    TOP_LEFT: "top-left",
    TOP_MIDDLE: "top-middle",
    TOP_RIGHT: "top-right",
    BOTTOM_LEFT: "bottom-left",
    BOTTOM_MIDDLE: "bottom-middle",
    BOTTOM_RIGHT: "bottom-right",
};
var SizePX = (_a = {},
    _a[Size.THIN] = 12,
    _a[Size.MEDIUM] = 16,
    _a[Size.THICK] = 20,
    _a);
var propTypes = {
    className: PropTypes.string,
    style: PropTypes.object,
    fill: PropTypes.number,
    color: PropTypes.string,
    label: PropTypes.string,
    width: PropTypes.number,
    striped: PropTypes.bool,
    inactive: PropTypes.bool,
    showLabel: PropTypes.string,
    labelType: PropTypes.string,
    markNumbers: PropTypes.array,
};
var cssClass = {
    CONTAINER: "ProgressBar--container",
    BAR_CONTAINER: "ProgressBar--bar--container",
    BAR_BORDER: "ProgressBar--bar--border",
    TRACKER: "ProgressBar--bar--tracker",
    INACTIVE: "ProgressBar--bar--inactive",
    BAR_MARK: "ProgressBar--bar--mark",
    BAR_THICK_MARK: "ProgressBar--bar--mark--thick",
    boxContainer: function (s) { return "ProgressBar--boxContainer--" + s; },
    borderSize: function (s) { return "ProgressBar--bar--border--" + s; },
    containerSize: function (s) { return "ProgressBar--bar--container--" + s; },
    label: function (p) { return "ProgressBar--label--" + p; },
};
var ProgressBar = /** @class */ (function (_super) {
    __extends(ProgressBar, _super);
    function ProgressBar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._maybeTopLabel = function () {
            var showLabel = _this.props.showLabel;
            var label = _this._getLabel();
            switch (showLabel) {
                case ShowLabel.TOP_LEFT:
                case ShowLabel.TOP_MIDDLE:
                case ShowLabel.TOP_RIGHT:
                    return (React.createElement(flex_1.FlexItem, { className: cssClass.label(showLabel), grow: true }, label));
                default:
                    return null;
            }
        };
        _this._maybeBottomLabel = function () {
            var showLabel = _this.props.showLabel;
            var label = _this._getLabel();
            switch (showLabel) {
                case ShowLabel.BOTTOM_LEFT:
                case ShowLabel.BOTTOM_MIDDLE:
                case ShowLabel.BOTTOM_RIGHT:
                    return (React.createElement(flex_1.FlexItem, { className: cssClass.label(showLabel), grow: true }, label));
                default:
                    return null;
            }
        };
        _this._getLabel = function () {
            var _a = _this.props, fill = _a.fill, label = _a.label, labelType = _a.labelType;
            if (labelType === "percentage") {
                return fill + "%";
            }
            if (label) {
                return label;
            }
            return labelType;
        };
        return _this;
    }
    ProgressBar.prototype.render = function () {
        var _a = this.props, className = _a.className, style = _a.style, color = _a.color, fill = _a.fill, width = _a.width, size = _a.size, striped = _a.striped, inactive = _a.inactive, markNumbers = _a.markNumbers;
        var sizePX = SizePX[size];
        var topLabel = this._maybeTopLabel();
        var bottomLabel = this._maybeBottomLabel();
        var markNumbersInRange = (markNumbers || []).filter(function (mark) { return mark < 100 && mark > 0; }).sort();
        var firstAfterFill = markNumbersInRange.find(function (mark) { return mark > fill; });
        return (React.createElement("div", { className: classnames(cssClass.CONTAINER, inactive && cssClass.INACTIVE, className) },
            React.createElement(flex_1.FlexBox, { className: classnames(cssClass.boxContainer(size)), column: true, style: {
                    width: width + "%",
                } },
                topLabel,
                React.createElement(flex_1.FlexItem, { grow: true },
                    React.createElement("div", { className: classnames(cssClass.BAR_CONTAINER, cssClass.containerSize(size)), style: __assign(__assign({}, style), { height: sizePX + "px" }) },
                        React.createElement("div", { className: classnames(cssClass.BAR_BORDER, cssClass.borderSize(size)) }),
                        markNumbersInRange.map(function (element) { return (React.createElement("div", { className: classnames(cssClass.BAR_MARK, firstAfterFill === element && cssClass.BAR_THICK_MARK), style: {
                                left: element + "%",
                            }, key: element })); }),
                        React.createElement(Progress_1.default, { fill: fill > 100 ? 100 : fill, color: color, size: size, striped: striped }))),
                bottomLabel)));
    };
    ProgressBar.propTypes = propTypes;
    ProgressBar.defaultProps = {
        size: Size.MEDIUM,
        color: "blue",
        width: 100,
        fill: 0,
        labelType: "percentage",
    };
    return ProgressBar;
}(React.PureComponent));
exports.default = ProgressBar;
