import { Component, ViewEncapsulation, Input, EventEmitter, Output, Renderer2, ViewChild, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
// import { Observable } from 'rxjs/Observable';
import { RxChain } from '@angular/cdk';
import { fromEvent } from 'rxjs/observable/fromEvent';
import { throttleTime } from 'rxjs/operator/throttleTime';
import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
import { NzScrollService } from "../core/scroll/nz-scroll.service";
var NzAnchorComponent = (function () {
    function NzAnchorComponent(scrollSrv, _renderer, doc) {
        this.scrollSrv = scrollSrv;
        this._renderer = _renderer;
        this.doc = doc;
        this.links = [];
        this.scroll$ = null;
        this.target = null;
        this.animating = false;
        this._top = 0;
        this._visible = false;
        this.nzOffsetTop = 0;
        this.nzBounds = 5;
        this.nzScroll = new EventEmitter();
    }
    Object.defineProperty(NzAnchorComponent.prototype, "nzTarget", {
        set: function (el) {
            this.target = el;
            this.registerScrollEvent();
        },
        enumerable: true,
        configurable: true
    });
    NzAnchorComponent.prototype.ngOnInit = function () {
        if (!this.scroll$)
            this.registerScrollEvent();
    };
    NzAnchorComponent.prototype.getTarget = function () {
        return this.target || window;
    };
    NzAnchorComponent.prototype.handleScroll = function () {
        var _this = this;
        if (this.animating)
            return;
        var sections = [];
        this.links.forEach(function (comp) {
            comp.active = false;
            var target = _this.doc.querySelector(comp.nzHref);
            var top = _this.scrollSrv.getOffset(target).top;
            if (target && top < _this.nzOffsetTop + _this.nzBounds) {
                sections.push({
                    top: top,
                    comp: comp
                });
            }
        });
        this._visible = !!sections.length;
        if (!this._visible)
            return;
        var maxSection = sections.reduce(function (prev, curr) { return curr.top > prev.top ? curr : prev; });
        maxSection.comp.active = true;
        var linkNode = maxSection.comp.el.nativeElement.querySelector('.ant-anchor-link-title');
        this.ball.nativeElement.style.top = linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5 + "px";
        // console.log(linkNode, linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5);
        this.nzScroll.emit(maxSection.comp);
    };
    NzAnchorComponent.prototype.removeListen = function () {
        if (this.scroll$)
            this.scroll$.unsubscribe();
    };
    NzAnchorComponent.prototype.registerScrollEvent = function () {
        var _this = this;
        this.removeListen();
        // 由于页面刷新时滚动条位置的记忆
        // 倒置在dom未渲染完成，导致计算不正确（500ms用于延后执行解决）
        setTimeout(function () {
            _this.handleScroll();
        }, 500);
        this.scroll$ = RxChain.from(fromEvent(this.getTarget(), 'scroll'))
            .call(throttleTime, 50)
            .call(distinctUntilChanged)
            .subscribe(function (e) {
            _this.handleScroll();
        });
    };
    NzAnchorComponent.prototype.add = function (linkComp) {
        this.links.push(linkComp);
    };
    /** 设置滚动条至 `linkComp` 所处位置 */
    NzAnchorComponent.prototype.scrollTo = function (linkComp) {
        var _this = this;
        var el = this.doc.querySelector(linkComp.nzHref);
        if (!el)
            return;
        this.animating = true;
        var containerScrollTop = this.scrollSrv.getScroll(this.getTarget());
        var elOffsetTop = this.scrollSrv.getOffset(el).top;
        var targetScrollTop = containerScrollTop + elOffsetTop - this.nzOffsetTop;
        this.scrollSrv.scrollTo(this.getTarget(), targetScrollTop, null, function () {
            _this.animating = false;
            _this.handleScroll();
        });
        if (!location.href.includes('#'))
            history.pushState(null, '', linkComp.nzHref);
    };
    NzAnchorComponent.prototype.ngOnDestroy = function () {
        this.removeListen();
    };
    return NzAnchorComponent;
}());
export { NzAnchorComponent };
NzAnchorComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-anchor',
                encapsulation: ViewEncapsulation.None,
                template: "\n  <div class=\"ant-anchor-wrapper\" #container>\n    <div class=\"ant-anchor\">\n      <div class=\"ant-anchor-ink\">\n        <div class=\"ant-anchor-ink-ball\" [class.visible]=\"_visible\" #ball></div>\n      </div>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  ",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-anchor {\n  position: relative;\n}\n.ant-anchor-wrapper {\n  background-color: #fff;\n}\n.ant-anchor-ink {\n  position: absolute;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n.ant-anchor-ink:before {\n  content: ' ';\n  position: relative;\n  width: 2px;\n  height: 100%;\n  display: block;\n  background-color: #e9e9e9;\n  margin: 0 auto;\n}\n.ant-anchor-ink-ball {\n  display: none;\n  position: absolute;\n  width: 9px;\n  height: 9px;\n  border-radius: 9px;\n  border: 3px solid #108ee9;\n  background-color: #fff;\n  left: 50%;\n  transition: top 0.3s ease-in-out;\n  transform: translateX(-50%);\n}\n.ant-anchor-ink-ball.visible {\n  display: inline-block;\n}\n.ant-anchor.fixed .ant-anchor-ink .ant-anchor-ink-ball {\n  display: none;\n}\n.ant-anchor-link {\n  padding: 8px 0 8px 18px;\n  line-height: 1;\n}\n.ant-anchor-link .ant-anchor-link {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.ant-anchor-link-title {\n  display: block;\n  position: relative;\n  transition: all .3s;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 8px;\n}\n.ant-anchor-link-title:only-child {\n  margin-bottom: 0;\n}\n.ant-anchor-link-active > .ant-anchor-link-title {\n  color: #108ee9;\n}\n.ant-anchor-link > .ant-anchor-link {\n  font-size: 12px;\n}\n",
                    "nz-link {\n  display: block;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzAnchorComponent.ctorParameters = function () { return [
    { type: NzScrollService, },
    { type: Renderer2, },
    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] },] },
]; };
NzAnchorComponent.propDecorators = {
    'container': [{ type: ViewChild, args: ['container',] },],
    'ball': [{ type: ViewChild, args: ['ball',] },],
    'nzTarget': [{ type: Input },],
    'nzOffsetTop': [{ type: Input },],
    'nzBounds': [{ type: Input },],
    'nzScroll': [{ type: Output },],
};
