import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Renderer2, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, switchMap, takeUntil } from 'rxjs/operators';
import { SliderService } from './slider.service';
import { TooltipDirective } from '../index';
import { OnChange } from '../core/decorators';
var SliderHandComponent = /** @class */ (function () {
    function SliderHandComponent(render, service) {
        this.render = render;
        this.service = service;
        /**
         * The range of dragging, width or height of the component
         */
        this.limitMove = 0;
        /**
         * The init position of hand
         */
        this.initPos = 0;
        /**
         * Whether the slider is disabled or not
         */
        this.disabled = false;
        /**
         * Max value of the dragging
         */
        this.max = 0;
        /**
         * Min value of the dragging
         */
        this.min = 0;
        /**
         * Step of dragging
         */
        this.step = 1;
        this.value = '';
        this.placement = '';
        /**
         * The event emitted when slider value changes, emit the init position and end position of hand
         */
        this.change = new EventEmitter();
        this.render = render;
    }
    SliderHandComponent.prototype.ngOnInit = function () {
        this.updateStyle(this.initPos);
        this.placement = this.orientation ? 'top' : 'right';
        if (this.disabled) {
            return;
        }
        if ((this.max - this.min) % this.step !== 0) {
            throw new Error('step需能被（max-min）整除');
        }
        this.bindEvent();
    };
    /**
     * Bind element event
     */
    SliderHandComponent.prototype.bindEvent = function () {
        var me = this;
        var hand = this._hand.nativeElement;
        var mouseDown$ = fromEvent(hand, 'mousedown');
        mouseDown$
            .pipe(map(function (event) {
            var target = event.target;
            var initPos = me.orientation
                ? parseInt(target.style.left)
                : parseInt(target.style.bottom);
            return {
                // 返回mousedown时的hand位置
                initPos: initPos,
                event: event
            };
        }), switchMap(function (initState) {
            return me.moveUntilUp(initState);
        }))
            .subscribe(function (pos) { return me.updateHand(pos); });
    };
    /**
     * mousemove事件流
     * @param initialState mousedown时的位置信息
     */
    SliderHandComponent.prototype.moveUntilUp = function (initialState) {
        var _this = this;
        var me = this;
        var mouseMove$ = fromEvent(document, 'mousemove');
        var mouseUp$ = fromEvent(document, 'mouseup');
        // mousedown时的鼠标位置
        // 锁定当前移动的hand
        var _a = initialState.event, clientX = _a.clientX, clientY = _a.clientY;
        var target = initialState.event.target;
        var initPos = initialState.initPos;
        return mouseMove$.pipe(map(function (moveEvent) {
            // 鼠标移动的距离
            var move;
            if (_this.orientation) {
                move = moveEvent.clientX - clientX;
            }
            else {
                move = clientY - moveEvent.clientY;
            }
            var endPos = move / me.limitMove * 100 + initPos;
            return {
                // hand的新位置
                endPos: endPos,
                // hand每一次移动前的位置
                initPos: me.orientation
                    ? parseFloat(target.style.left)
                    : parseFloat(target.style.bottom)
            };
        }), takeUntil(mouseUp$));
    };
    /**
     * 更新hand位置
     * @param pos mouseup时的位置信息
     */
    SliderHandComponent.prototype.updateHand = function (pos) {
        var me = this;
        var endPos = pos.endPos;
        var initPos = pos.initPos;
        if (endPos < 0) {
            endPos = 0;
        }
        if (endPos > 100) {
            endPos = 100;
        }
        var move = endPos - initPos;
        var step = me.step / (me.max - me.min) * 100;
        // 重置hand
        if (Math.abs(Math.abs(move) - step) < 0) {
            return;
        }
        else {
            move = Math.round(move / step) * step;
        }
        endPos = initPos + move;
        endPos = endPos > 0 ? endPos : 0;
        me.updateStyle(endPos);
        me.change.emit({
            endPos: endPos,
            initPos: initPos
        });
    };
    /**
     * update end position of hand
     * @param val position
     */
    SliderHandComponent.prototype.updateStyle = function (val) {
        var hand = this._hand.nativeElement;
        var style = this.orientation ? 'left' : 'bottom';
        this.render.setStyle(hand, style, val + "%");
        // tooltip
        var value = this.service.getValue(val, this.step, this.min, this.max);
        this.value = "" + value;
        this.tooltip.needReposition();
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], SliderHandComponent.prototype, "limitMove", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], SliderHandComponent.prototype, "orientation", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], SliderHandComponent.prototype, "initPos", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], SliderHandComponent.prototype, "disabled", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], SliderHandComponent.prototype, "max", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], SliderHandComponent.prototype, "min", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], SliderHandComponent.prototype, "step", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], SliderHandComponent.prototype, "change", void 0);
    tslib_1.__decorate([
        ViewChild('sliderHand', { static: true }),
        tslib_1.__metadata("design:type", ElementRef)
    ], SliderHandComponent.prototype, "_hand", void 0);
    tslib_1.__decorate([
        ViewChild(TooltipDirective, { static: true }),
        tslib_1.__metadata("design:type", TooltipDirective)
    ], SliderHandComponent.prototype, "tooltip", void 0);
    SliderHandComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-slider-hand',
            template: " <div #sliderHand class=\"nb-slider-hand\" [nbTooltip]=\"value\"\n                hasArrow=\"true\" [placement]=\"placement\"></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget'
            },
            exportAs: 'nbSliderHand'
        }),
        tslib_1.__metadata("design:paramtypes", [Renderer2, SliderService])
    ], SliderHandComponent);
    return SliderHandComponent;
}());
export { SliderHandComponent };
//# sourceMappingURL=slider-hand.js.map