/**
 * Created by hubert on 8/06/17.
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import "polymer/polymer-element.html";
import "../iron-list/iron-list.html";
import "iron-flex-layout/iron-flex-layout.html";
import "ozone-collection";
import "./ozone-iron-list.html";
import { customElement, } from 'taktik-polymer-typescript';
import { property } from "taktik-polymer-typescript";
let OzoneIronList = class OzoneIronList extends Polymer.ElementMixin(IronList) {
    constructor() {
        super(...arguments);
        /**
         * true indicate that all the data data still available with this search.
         */
        this.hasMoreData = false;
        this.items = [];
        // static get properties(){
        //     return {
        //         scrollthresholdPc:{
        //             type: Number
        //         }
        //     }
        // }
        this._scrollTrigger = false;
        /**
         * scrollthreshold in percent to trigger loading of more items
         * @type {number}
         */
        this.scrollthresholdPc = 80;
    }
    clearTriggers() {
        this._scrollTrigger = false;
    }
    ready() {
        super.ready();
        this.addEventListener("scroll", (event) => {
            this._checkScroll();
        });
        this.$.mosaicCollection.addEventListener('collection-property-changed', (e) => {
            this.set(e.detail.name, e.detail.value);
        });
        //Periodic verification because no scroll event is trigger when nb of items display does not overflow display size
        setInterval(() => {
            this._checkScroll();
        }, 100);
    }
    _checkScroll() {
        const percentage = this.getScrollPercentage();
        if (percentage > this.scrollthresholdPc && !this._scrollTrigger) {
            this._scrollTrigger = true;
            this.toggleThreshold();
        }
    }
    getScrollPercentage() {
        if (this.scrollTarget) {
            return (this.scrollTarget.clientHeight + this.scrollTarget.scrollTop) / this.scrollTarget.scrollHeight * 100;
        }
        else {
            return 0;
        }
    }
    /**
     * Load more items to display
     */
    loadMoreItems() {
        return __awaiter(this, void 0, void 0, function* () {
            const items = yield this.$.mosaicCollection.loadNextItems();
            this._afterCollectionUpdate();
            return items;
        });
    }
    toggleThreshold() {
        if (this.hasMoreData) {
            return this.loadMoreItems()
                .catch(() => {
            })
                .then(() => {
                this.clearTriggers();
            });
        }
        this.clearTriggers();
        return Promise.resolve();
    }
    /**
     * start search query
     * short hand for this.$.mosaicCollection.search
     * @param {SearchQuery} searchRequest
     * @return {Promise<Array<Item>>}
     */
    search(searchRequest) {
        return __awaiter(this, void 0, void 0, function* () {
            const items = yield this.$.mosaicCollection.search(searchRequest);
            this._afterCollectionUpdate();
            return items;
        });
    }
    /**
     * empty collection
     */
    clear() {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.$.mosaicCollection.clear();
            this._afterCollectionUpdate();
        });
    }
    _afterCollectionUpdate() {
        // workaround to enable infinit scroll, othervise it does not display all the list.
        // Needed only once.
        // TODO improve component to avoid this call
        this.notifyResize();
    }
};
__decorate([
    property({
        type: Number,
        notify: true,
    }),
    __metadata("design:type", Number)
], OzoneIronList.prototype, "total", void 0);
__decorate([
    property({
        type: Boolean,
        notify: true,
    }),
    __metadata("design:type", Boolean)
], OzoneIronList.prototype, "hasMoreData", void 0);
__decorate([
    property({
        type: Array,
        notify: true,
    }),
    __metadata("design:type", Array)
], OzoneIronList.prototype, "items", void 0);
OzoneIronList = __decorate([
    customElement('ozone-iron-list')
], OzoneIronList);
export { OzoneIronList };
