/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RmService } from '@bidi/common-services';
import debounce from 'lodash/debounce';
import * as filters from './filters';
import { ContentsLibraryServices } from './contents-library.services';
/**
 * @record
 */
export function SearchForm() { }
if (false) {
    /** @type {?|undefined} */
    SearchForm.prototype.q;
    /** @type {?|undefined} */
    SearchForm.prototype.tags;
}
var ContentsLibraryComponent = /** @class */ (function () {
    function ContentsLibraryComponent(rm, contentsLibraryServices) {
        var _this = this;
        this.rm = rm;
        this.contentsLibraryServices = contentsLibraryServices;
        this.params = {};
        this.selection = new EventEmitter();
        this.close = new EventEmitter();
        this.openContentCustom = new EventEmitter();
        this.addTheme = new EventEmitter();
        this.tabsOptions = [
            {
                title: 'Recursos',
                id: 'recursos'
            },
            {
                title: 'Secuencias',
                id: 'secuencias'
            }
        ];
        this.loading = false;
        this.showPreview = true;
        this.currentSelection = null;
        this.filters = filters;
        this.firstFilter = true;
        this.secondFilter = false;
        this.secondFilterText = 'Filtros Avanzados';
        this.fetch = debounce(function () {
            _this.loading = false;
            _this.contentsLibraryServices.getResources({ tags: Object.values(_this.form.tags).filter(Boolean), q: _this.form.q, limit: 300 });
        }, 500);
        this.toggleTabs(this.tabsOptions[0]);
    }
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.ngOnChanges = /**
     * @return {?}
     */
    function () {
        this.form = Object.assign({ q: '', tags: {} }, this.params);
        this.fetch();
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        // this.contentsLibraryServices;
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.simpleSearchInputChange = /**
     * @return {?}
     */
    function () {
        if (this.form.q.length >= 3) {
            this.loading = true;
            this.fetch();
        }
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.inputChange = /**
     * @return {?}
     */
    function () {
        this.loading = true;
        this.fetch();
    };
    /**
     * @param {?} resource
     * @return {?}
     */
    ContentsLibraryComponent.prototype.selectResource = /**
     * @param {?} resource
     * @return {?}
     */
    function (resource) {
        this.currentSelection = resource;
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.submit = /**
     * @return {?}
     */
    function () {
        this.selection.emit(this.currentSelection);
        this.currentSelection = null;
    };
    /**
     * @param {?} r
     * @return {?}
     */
    ContentsLibraryComponent.prototype.submit2 = /**
     * @param {?} r
     * @return {?}
     */
    function (r) {
        this.selection.emit(r);
        this.currentSelection = null;
    };
    /**
     * @param {?} e
     * @return {?}
     */
    ContentsLibraryComponent.prototype.newTheme = /**
     * @param {?} e
     * @return {?}
     */
    function (e) {
        this.addTheme.emit(e);
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.openFirstFilter = /**
     * @return {?}
     */
    function () {
        this.firstFilter = !this.firstFilter;
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.toggleSecondFilter = /**
     * @return {?}
     */
    function () {
        this.secondFilter = !this.secondFilter;
        if (!this.secondFilter) {
            this.secondFilterText = 'Filtros Avanzados';
            console.log('no');
        }
        else {
            this.secondFilterText = 'Ocultar filtros avanzados';
            console.log('si');
        }
    };
    /**
     * @param {?} e
     * @return {?}
     */
    ContentsLibraryComponent.prototype.toggleTabs = /**
     * @param {?} e
     * @return {?}
     */
    function (e) {
        this.showTab = e;
    };
    ContentsLibraryComponent.decorators = [
        { type: Component, args: [{
                    selector: 'bidi-contents-library',
                    template: "<div class=\"contents-library is-flex has-column-direction\">\n    <div class=\"close-button\">\n        <button\n            (click)=\"close.emit()\"\n            class=\"button is-text\"\n        >\n            <svg class=\"icon-svg-tt-angle-right\">\n                <use :xlink:href=\"#icon-svg-tt-angle-right\"></use>\n            </svg>\n        </button>\n    </div>\n    <div class=\"library-header\">\n        <!-- <h2 class=\"is-size-4 is-ff-light\">{{ libTitle }}</h2>\n     <h3 *ngIf=\"subtitle && districtSelect\" class=\"is-size-6 is-ff-light\">{{ subtitle }} {{ districtSelect | uppercase}}</h3> -->\n        <div class=\"field\">\n            <div class=\"control search-field\">\n                <input\n                    [(ngModel)]=\"form.q\"\n                    (ngModelChange)=\"simpleSearchInputChange()\"\n                    class=\"input t-is-size-3\"\n                    type=\"text\"\n                    placeholder=\"Buscar\"\n                >\n                <div>\n                    <svg class=\"icon-svg-tt-search icon has-text-grey-light\">\n                       <path d=\"m205 384c43 0 83-16 114-42l139 139c3 3 7 5 12 5 4 0 8-2 11-5 6-6 6-17 0-23l-139-139c26-31 42-71 42-114 0-99-80-179-179-179-99 0-179 80-179 179 0 99 80 179 179 179z m0-326c81 0 146 66 146 147 0 81-65 146-146 146-81 0-147-66-147-146 0-81 66-147 147-147z\"/>\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <div class=\"is-relative filters-container\">\n            <div class=\"filters is-relative first-filter\">\n                <!-- <p\n                    class=\"is-absolute filter-toggle has-text-tt-secondary\"\n                    (click)=\"toggleSecondFilter()\"\n                >\n                    {{ secondFilterText }}\n                </p> -->\n                <div class=\"columns\">\n                    <div class=\"column \">\n                        <tags-select\n                        [title]=\"'Nivel'\"\n                        [tags]=\"contentsLibraryServices.levelsTags$\"\n                        [type]=\"'level'\"\n                        [(ngModel)]=\"form.tags.level\"\n                        (ngModelChange)=\"inputChange()\"\n                    >\n                    </tags-select>\n                    </div>\n                    <div class=\"column \">\n                        <tags-select\n                            [title]=\"'Asignatura'\"\n                            [tags]=\"contentsLibraryServices.asignaturesTags$\"\n                            [type]=\"'materia'\"\n                            [(ngModel)]=\"form.tags.subject\"\n                            (ngModelChange)=\"inputChange()\"\n                        >\n                        </tags-select>\n                    </div>\n                </div>\n            </div>\n            <!-- <div\n                class=\"columns\"\n                *ngIf=\"secondFilter\"\n            >\n                <div class=\"column \">\n                    <tags-select\n                        [title]=\"'Distrito'\"\n                        [tags]=\"contentsLibraryServices.districtsTags$\"\n                        [type]=\"'jurisdiccion'\"\n                        [(ngModel)]=\"form.tags.district\"\n                        (ngModelChange)=\"inputChange()\"\n                    >\n                    </tags-select>\n                </div>\n                <div class=\"column \">\n                    <tags-select\n                        [title]=\"'Nivel'\"\n                        [tags]=\"contentsLibraryServices.levelsTags$\"\n                        [type]=\"'level'\"\n                        [(ngModel)]=\"form.tags.level\"\n                        (ngModelChange)=\"inputChange()\"\n                    >\n                    </tags-select>\n                </div>\n            </div> -->\n        </div>\n    </div>\n    <p\n        class=\"t-is-size-3 is-tt-secondary has-text-centered has-text-tt-secondary\"\n        style=\"cursor: pointer;margin: 1% 0;\"\n        (click)=\"openContentCustom.emit()\"\n    >\n        <strong>\u00BFNo encontraste lo que est\u00E1s buscando?</strong>\n        Crea un nuevo contenido\n    </p>\n    <div class=\"contents-list flex-1\">\n        <div\n            *ngIf=\"loading\"\n            class=\"loading-container\"\n        >\n            <div>\n                <bidi-loading></bidi-loading>\n            </div>\n        </div>\n        <p class=\"has-text-centered\" style=\"padding: 7px 0;\">{{(contentsLibraryServices.resList$ | async).length}} resultados <span *ngIf=\"form.tags.subject !=='' || form.tags.level !== ''\">para la b\u00FAsqueda: <span class=\"is-ff-bold\">{{form.tags.subject}}, {{form.tags.level}}, <span>{{form.q}}</span> </span></span> </p>\n        <ng-container *ngFor=\"let resource of contentsLibraryServices.resList$ | async\">\n            <bidi-content\n                [resource]=\"resource\"\n                [themes]=\"themes\"\n                [views]=\"(views?.count_views[resource.id])\"\n                [selected]=\"resource === currentSelection\"\n                (click)=\"selectResource(resource)\"\n                (resourceSelected)=\"submit2($event)\"\n                (newTheme)=\"newTheme($event)\"\n                [dateSelect]=\"dateSelect\"\n                [noPublicator]=\"noPublicator\"\n            ></bidi-content>\n        </ng-container>\n    </div>\n</div>\n",
                    styles: [".contents-library{height:100%;position:relative;padding:1rem 1rem 1rem 2rem}.close-button{position:absolute;left:0}.close-button .button{padding:0;background:0 0}.library-header h3{margin-bottom:.5rem}.contents-list{overflow:auto;padding-right:3%;margin-right:0}.loading-container{position:absolute;left:0;top:0;right:0;bottom:0;z-index:9}.loading-container>div{position:relative;height:100%}.search-field{margin-right:.2rem}.search-field>:last-child{position:absolute;right:7px;top:0;bottom:0;display:flex;align-items:center}.search-field>:last-child svg{fill:#00cefa;height:1.1rem;width:1.1rem;margin-right:.3rem}.search-field .input{padding:.9rem}.hideable{opacity:0;transition:.25s;cursor:not-allowed}.hideable.visible{opacity:1;cursor:pointer}.filters-container{padding-bottom:1px;border-bottom:1px solid #e5e5e5}.filters-container .is-size-7{font-size:.625rem!important;font-family:latobold}.filters-container .filters.first-filter{padding-bottom:30px}.filters-container .filters.first-filter .column{padding-top:0}.filters-container .filters .filter-toggle{bottom:0;right:0;cursor:pointer}.filters-container .filters .field{margin:0}.filters-container .filters p{margin-bottom:4px;margin-top:4px;margin-left:3px}.filters-container .filters ul{padding:0;margin:0}.filters-container .filters ul li{list-style:none;padding:0;margin:0;font-size:.7em}.buttons{border-top:1px solid #e5e5e5;justify-content:center;height:9%;align-items:center}.buttons .button{margin:0}select{margin-top:5px}select options{font-size:.9em}h4{color:#727272;margin-top:5px}.select select:not([multiple]){padding:.8rem}.navbar-link:not(.is-arrowless)::after,.select:not(.is-multiple):not(.is-loading)::after{height:.625rem;width:.625rem}.tab-resources{padding-top:5%}.content-tags li{list-style:disc;margin-left:17px}.content-tags li::first-letter{text-transform:uppercase}"]
                }] }
    ];
    /** @nocollapse */
    ContentsLibraryComponent.ctorParameters = function () { return [
        { type: RmService },
        { type: ContentsLibraryServices }
    ]; };
    ContentsLibraryComponent.propDecorators = {
        params: [{ type: Input }],
        libTitle: [{ type: Input }],
        subtitle: [{ type: Input }],
        themes: [{ type: Input }],
        views: [{ type: Input }],
        dateSelect: [{ type: Input }],
        noPublicator: [{ type: Input }],
        selection: [{ type: Output }],
        close: [{ type: Output }],
        openContentCustom: [{ type: Output }],
        addTheme: [{ type: Output }]
    };
    return ContentsLibraryComponent;
}());
export { ContentsLibraryComponent };
if (false) {
    /** @type {?} */
    ContentsLibraryComponent.prototype.params;
    /** @type {?} */
    ContentsLibraryComponent.prototype.libTitle;
    /** @type {?} */
    ContentsLibraryComponent.prototype.subtitle;
    /** @type {?} */
    ContentsLibraryComponent.prototype.themes;
    /** @type {?} */
    ContentsLibraryComponent.prototype.views;
    /** @type {?} */
    ContentsLibraryComponent.prototype.dateSelect;
    /** @type {?} */
    ContentsLibraryComponent.prototype.noPublicator;
    /** @type {?} */
    ContentsLibraryComponent.prototype.selection;
    /** @type {?} */
    ContentsLibraryComponent.prototype.close;
    /** @type {?} */
    ContentsLibraryComponent.prototype.openContentCustom;
    /** @type {?} */
    ContentsLibraryComponent.prototype.addTheme;
    /** @type {?} */
    ContentsLibraryComponent.prototype.tabsOptions;
    /** @type {?} */
    ContentsLibraryComponent.prototype.showTab;
    /** @type {?} */
    ContentsLibraryComponent.prototype.loading;
    /** @type {?} */
    ContentsLibraryComponent.prototype.showPreview;
    /** @type {?} */
    ContentsLibraryComponent.prototype.form;
    /** @type {?} */
    ContentsLibraryComponent.prototype.currentSelection;
    /** @type {?} */
    ContentsLibraryComponent.prototype.filters;
    /** @type {?} */
    ContentsLibraryComponent.prototype.firstFilter;
    /** @type {?} */
    ContentsLibraryComponent.prototype.secondFilter;
    /** @type {?} */
    ContentsLibraryComponent.prototype.secondFilterText;
    /**
     * @type {?}
     * @private
     */
    ContentsLibraryComponent.prototype.fetch;
    /**
     * @type {?}
     * @private
     */
    ContentsLibraryComponent.prototype.rm;
    /** @type {?} */
    ContentsLibraryComponent.prototype.contentsLibraryServices;
}
//# sourceMappingURL=data:application/json;base64, 