"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Item_1 = require("./Item");
var Range_1 = require("../../components/Range");
var icons_1 = require("../../components/icons");
;
;
;
var RangeControl = /** @class */ (function (_super) {
    tslib_1.__extends(RangeControl, _super);
    function RangeControl(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            value: parseFloat(props.value) || 0
        };
        _this.handleChange = _this.handleChange.bind(_this);
        _this.handleEnd = _this.handleEnd.bind(_this);
        _this.handleInputChange = _this.handleInputChange.bind(_this);
        _this.rangeValue = _this.rangeValue.bind(_this);
        _this.midLabelRef = _this.midLabelRef.bind(_this);
        return _this;
    }
    RangeControl.prototype.componentWillReceiveProps = function (nextProps) {
        var value = this.props.value;
        if (value !== nextProps.value) {
            this.setState({
                value: parseFloat(nextProps.value) || 0
            });
        }
    };
    RangeControl.prototype.componentDidMount = function () {
        this.updateStyle();
    };
    RangeControl.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.showInput !== this.props.showInput) {
            this.updateStyle();
        }
    };
    RangeControl.prototype.updateStyle = function () {
        var _a = this.props, showInput = _a.showInput, ns = _a.classPrefix;
        var offsetWidth = this.midLabel.offsetWidth;
        var left = "calc(50% - " + offsetWidth / 2 + "px)";
        document.querySelector("." + ns + "InputRange-label--value").style.left = left;
        if (showInput) {
            left = "calc(50% - " + (offsetWidth / 2 + 60) + "px)";
        }
        this.midLabel.style.left = left;
    };
    RangeControl.prototype.midLabelRef = function (ref) {
        this.midLabel = ref;
    };
    RangeControl.prototype.handleChange = function (value) {
        this.setState({
            value: this.getValue(value)
        });
    };
    RangeControl.prototype.handleEnd = function (value) {
        var onChange = this.props.onChange;
        this.setState({
            value: value
        }, function () { return onChange(value); });
    };
    RangeControl.prototype.getStepPrecision = function () {
        var step = this.props.step;
        return typeof step !== 'number' || step >= 1 || step < 0
            ? 0
            : step.toString().split(".")[1].length;
    };
    RangeControl.prototype.getValue = function (value) {
        var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
        if (value === '' || value === '-' || new RegExp('^[-]?\\d+[.]{1}[0]{0,' + this.getStepPrecision() + '}$').test(value)) {
            return value;
        }
        // if (!value || value === '00') {
        //     return min;
        // }
        value = Math.round(parseFloat(value) / step) * step;
        value = (step < 1) ? parseFloat(value.toFixed(this.getStepPrecision())) : ~~value;
        return (value < min && min) || (value > max && max) || value;
    };
    RangeControl.prototype.handleInputChange = function (evt) {
        this.setState({
            value: this.getValue(evt.target.value)
        });
    };
    RangeControl.prototype.rangeValue = function () {
        var value = this.state.value;
        // if (/^\d+[.]{1}$/.test(value)) {
        //     return this.props.min;
        // }
        return parseFloat(value);
    };
    RangeControl.prototype.render = function () {
        var _this = this;
        var _a = this.props, max = _a.max, min = _a.min, step = _a.step, unit = _a.unit, clearable = _a.clearable, name = _a.name, disabled = _a.disabled, className = _a.className, onChange = _a.onChange, showInput = _a.showInput, cx = _a.classnames, ns = _a.classPrefix;
        return (React.createElement("div", { className: cx("RangeControl", {
                'RangeControl--withInput': showInput,
                'RangeControl--clearable': clearable,
            }, className) },
            React.createElement(Range_1.default, { classPrefix: ns, value: this.rangeValue(), disabled: disabled, onChange: this.handleChange, onChangeComplete: this.handleEnd, max: max, min: min, step: step, formatLabel: function (value) { return value + unit; } }),
            React.createElement("span", { className: cx("InputRange-label InputRange-label--mid"), ref: this.midLabelRef },
                React.createElement("span", { className: cx("InputRange-labelContainer") }, ((max + min) / 2).toFixed(this.getStepPrecision()) + unit)),
            showInput ? (React.createElement("div", { className: cx("InputRange-input") },
                React.createElement("input", { className: this.state.value !== min ? 'is-active' : '', type: "text", name: name, value: this.state.value, disabled: disabled, onChange: this.handleInputChange }))) : null,
            clearable && this.rangeValue() !== min && showInput ? (React.createElement("a", { onClick: function () { return _this.handleChange(min); }, className: cx("InputRange-clear", {
                    'is-active': (this.state.value !== min)
                }) }, icons_1.closeIcon)) : null));
    };
    RangeControl.defaultProps = {
        max: 100,
        min: 0,
        step: 1,
        unit: '',
        clearable: true,
        disabled: false,
        showInput: false
    };
    return RangeControl;
}(React.PureComponent));
exports.default = RangeControl;
var RangeControlRenderer = /** @class */ (function (_super) {
    tslib_1.__extends(RangeControlRenderer, _super);
    function RangeControlRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    RangeControlRenderer = tslib_1.__decorate([
        Item_1.FormItem({
            test: /(^|\/)form(?:\/.+)?\/control\/(?:\d+\/)?(slider|range)$/,
            name: 'range-control'
        })
    ], RangeControlRenderer);
    return RangeControlRenderer;
}(RangeControl));
exports.RangeControlRenderer = RangeControlRenderer;
;
//# sourceMappingURL=./renderers/Form/Range.js.map
