/**
 * @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 { of } from 'rxjs';
import * as filters from './filters';
import { catchError, switchMap, tap } from 'rxjs/operators';
/**
 * @record
 */
export function SearchForm() { }
if (false) {
    /** @type {?|undefined} */
    SearchForm.prototype.q;
    /** @type {?|undefined} */
    SearchForm.prototype.subject;
    /** @type {?|undefined} */
    SearchForm.prototype.type;
    /** @type {?|undefined} */
    SearchForm.prototype.level;
    /** @type {?|undefined} */
    SearchForm.prototype.district;
    /** @type {?|undefined} */
    SearchForm.prototype.curri;
}
var ContentsLibraryComponent = /** @class */ (function () {
    function ContentsLibraryComponent(rm) {
        var _this = this;
        this.rm = rm;
        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.planningResources = [];
        this.othersResources = [];
        this.currentSelection = null;
        this.filters = filters;
        this.firstFilter = true;
        this.secondFilter = false;
        this.fetch = debounce(function () {
            _this.firstFilter = true;
            _this.secondFilter = false;
            _this.loading = true;
            /** @type {?} */
            var config = { tags: [] };
            _this.districtSelect = '';
            if (_this.form.q) {
                config['q'] = _this.form.q;
            }
            if (_this.form.district && _this.form.district !== 'undefined') {
                _this.districtSelect = _this.form.district;
                config.tags.push(_this.form.district);
            }
            if (_this.form.level && _this.form.level !== 'undefined') {
                config.tags.push(_this.form.level);
            }
            if (_this.form.type && _this.form.type !== 'undefined') {
                config['type'] = _this.form.type;
            }
            if (_this.form.subject && _this.form.subject !== 'undefined') {
                config.tags.push(_this.form.subject);
            }
            if (_this.form.curri && _this.form.curri !== 'undefined') {
                config.tags.push(_this.form.curri);
            }
            _this.resources$ = _this.rm.getResources(config).pipe(switchMap(function (resources) { return of(resources); }), catchError(function (err) { return of([]); }), tap(function () { return _this.loading = false; }));
            _this.planningResources = [];
            _this.othersResources = [];
            /** @type {?} */
            var result = _this.resources$.subscribe(function (res) {
                res.map(function (r) {
                    if (r.type === 'planning') {
                        _this.planningResources.push(r);
                    }
                    else {
                        _this.othersResources.push(r);
                    }
                });
            }, catchError(function (err) { return of([]); }));
        }, 500);
        this.toggleTabs(this.tabsOptions[0]);
    }
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.ngOnChanges = /**
     * @return {?}
     */
    function () {
        this.form = Object.assign({}, {
            q: undefined, subject: undefined, type: undefined, district: undefined, level: undefined, curri: undefined
        }, this.params);
        this.fetch();
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.districts$ = this.rm.getTags({ type: 'jurisdiccion' }).pipe(switchMap(function (districts) { return of(districts); }), catchError(function (err) { return of([]); }), tap(function () { return _this.loading = false; }));
        this.curri$ = this.rm.getTags({ type: 'curricula' }).pipe(switchMap(function (curri) { return of(curri); }), catchError(function (err) { return of([]); }), tap(function () { return _this.loading = false; }));
    };
    /**
     * @return {?}
     */
    ContentsLibraryComponent.prototype.inputChange = /**
     * @return {?}
     */
    function () {
        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.openSecondFilter = /**
     * @return {?}
     */
    function () {
        this.secondFilter = true;
    };
    /**
     * @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 (click)=\"close.emit()\" class=\"button is-text\">\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\n  <div class=\"library-header\">\n    <h2 class=\"is-size-4 is-ff-light\">{{ title }}</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)=\"inputChange()\"\n          class=\"input\"\n          type=\"text\"\n          placeholder=\"Buscar\">\n        <div>\n          <svg class=\"icon-svg-tt-search icon has-text-grey-light\">\n            <use xlink:href=\"#icon-svg-tt-search\"></use>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <div class=\"is-relative\">\n      <div class=\"filters\" [ngClass]=\"{ 'active': firstFilter }\">\n        <p class=\"is-size-7 is-ff-light\">Filtrar por:</p>\n        <div class=\"columns\" style=\"border-bottom: 1px solid #e5e5e5;\">\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Distrito</p>\n            <div class=\"field\">\n              <div class=\"control\">\n                <div class=\"select\">\n                  <select [(ngModel)]=\"form.district\" (ngModelChange)=\"inputChange()\">\n                    <option selected [value]=\"undefined\" class=\"has-text-grey-light\">Seleccione</option>\n                    <option [value]=\"distr.name\" *ngFor=\"let distr of districts$ | async\" >{{ distr.name }}</option>\n                  </select>\n                </div>\n              </div>\n            </div>\n            \n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Curricula</p>\n            <div class=\"field\">\n              <div class=\"control\">\n                <div class=\"select\">\n                  <select [(ngModel)]=\"form.curri\" (ngModelChange)=\"inputChange()\">\n                    <option selected [value]=\"undefined\" class=\"has-text-grey-light\">Seleccione</option>\n                    <option [value]=\"cu.name\" *ngFor=\"let cu of curri$ | async\">{{ cu.name }}</option>\n                  </select>\n                </div>\n              </div>\n            </div>\n            \n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Asignatura</p>\n            <div class=\"field\">\n              <div class=\"control\">\n                <div class=\"select\">\n                  <select [(ngModel)]=\"form.subject\" (ngModelChange)=\"inputChange()\">\n                    <option selected [value]=\"undefined\" class=\"has-text-grey-light\">Seleccione</option>\n                    <option [value]=\"mat\" *ngFor=\"let mat of filters.materia\">{{ mat }}</option>\n                  </select>\n                </div>\n              </div>\n            </div>\n            \n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Nivel</p>\n            <div class=\"field\">\n              <div class=\"control\">\n                <div class=\"select\">\n                  <select [(ngModel)]=\"form.level\" (ngModelChange)=\"inputChange()\">\n                    <option selected [value]=\"undefined\" class=\"has-text-grey-light\">Seleccione</option>\n                    <option [value]=\"level\" *ngFor=\"let level of filters.nivel\">{{ level }}</option>\n                  </select>\n                </div>\n              </div>\n            </div>\n            \n          </div>\n          \n        </div>\n        <div class=\"columns\" *ngIf=\"secondFilter\">\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Eje</p>\n            <div class=\"select\">\n              <select disabled>\n                <option selected disabled value=\"\">Seleccione</option>\n                <option value=\"\" *ngFor=\"let eje of filters.ejes\">{{ eje }}</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Contenido</p>\n            <div class=\"select\">\n              <select disabled>\n                <option selected disabled value=\"\">Seleccione</option>\n                <option value=\"\" *ngFor=\"let contenido of filters.contenidos\">{{ contenido }}</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Temas generales</p>\n            <div class=\"select\">\n              <select disabled>\n                <option selected disabled value=\"\">Seleccione</option>\n                <option value=\"\" *ngFor=\"let tema of filters.temas\">{{ tema }}</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"column\">\n            <p class=\"is-size-7 is-ff-bold is-ff-light\">Capacidades</p>\n            <div class=\"select\">\n              <select disabled>\n                <option selected disabled value=\"\">Seleccione</option>\n                <option value=\"\" *ngFor=\"let capacidad of filters.capacidades\">{{ capacidad }}</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"tabs\">\n    <ul>\n      <li [ngClass]=\"{'is-active': tab.id === showTab.id}\" (click)=\"toggleTabs(tab)\" \n      *ngFor=\"let tab of tabsOptions\">\n        <a>\n          <h3 class=\"is-size-6 is-ff-light\">{{tab.title}}</h3>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"contents-list flex-1\">\n      <div *ngIf=\"loading\" class=\"loading-container\">\n        <div>\n          <bidi-loading></bidi-loading>\n        </div>\n      </div>\n      <!--<ng-container *ngFor=\"let resource of resources$ | async\">\n        <bidi-planning\n          *ngIf=\"resource.type === 'planning' && params.type === 'planning'\"\n          [planning]=\"resource\"\n          [selected]=\"resource === currentSelection\"\n          (click)=\"selectResource(resource)\"\n        ></bidi-planning>\n      </ng-container>-->\n      \n\n      <ng-container *ngIf=\"planningResources.length > 0 && showTab.id === 'secuencias'\">\n          <ng-container *ngFor=\"let resource of planningResources\">\n              <bidi-content\n                  [resource]=\"resource\"\n                  [themes]=\"themes\"\n                  [selected]=\"resource === currentSelection\"\n                  (click)=\"selectResource(resource)\"\n                  (resourceSelected)=\"submit2($event)\"\n                  (newTheme)=\"newTheme($event)\"\n              ></bidi-content>\n          </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"params.type !== 'planning' && othersResources.length > 0 && showTab.id === 'recursos'\">\n          <ng-container *ngFor=\"let resource of othersResources\">\n            <bidi-content\n              [resource]=\"resource\"\n              [themes]=\"themes\"\n              [selected]=\"resource === currentSelection\"\n              (click)=\"selectResource(resource)\"\n              (resourceSelected)=\"submit2($event)\"\n              (newTheme)=\"newTheme($event)\"\n            ></bidi-content>\n          </ng-container>\n      </ng-container>\n  </div>\n  <div class=\"contents-add-new-custom buttons is-center\">\n    <button (click)=\"openContentCustom.emit()\"\n     class=\"button is-text-button is-uppercase is-tt is-size-7\">\n        <span>Crear contenido</span>\n        <svg class=\"icon-svg-tt-plus icon is-small\">\n          <use xlink:href=\"#icon-svg-tt-plus\"></use>\n        </svg>\n    </button>\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{max-height:69%;overflow:auto;position:relative}.loading-container{position:absolute;left:0;top:0;right:0;bottom:0;z-index:9}.loading-container>div{position:relative;height:100%}.search-field>:last-child{position:absolute;right:.2rem;top:0;bottom:0;display:flex;align-items:center}.search-field .input{padding-right:1.8rem}.hideable{opacity:0;transition:.25s;cursor:not-allowed}.hideable.visible{opacity:1;cursor:pointer}.filters{z-index:1000;left:0;right:0;top:28px;padding:0;background:#fff;color:#333;height:0;transition:.25s;overflow:hidden}.filters .field{margin:0}.filters .select{font-size:.9em;width:100%}.filters .select select{width:100%}.filters p{margin-bottom:2px}.filters.active{padding:0 3px;height:78px}.filters ul{padding:0;margin:0}.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}.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 }
    ]; };
    ContentsLibraryComponent.propDecorators = {
        params: [{ type: Input }],
        title: [{ type: Input }],
        subtitle: [{ type: Input }],
        themes: [{ 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.title;
    /** @type {?} */
    ContentsLibraryComponent.prototype.subtitle;
    /** @type {?} */
    ContentsLibraryComponent.prototype.themes;
    /** @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.resources$;
    /** @type {?} */
    ContentsLibraryComponent.prototype.districts$;
    /** @type {?} */
    ContentsLibraryComponent.prototype.curri$;
    /** @type {?} */
    ContentsLibraryComponent.prototype.planningResources;
    /** @type {?} */
    ContentsLibraryComponent.prototype.othersResources;
    /** @type {?} */
    ContentsLibraryComponent.prototype.districtSelect;
    /** @type {?} */
    ContentsLibraryComponent.prototype.form;
    /** @type {?} */
    ContentsLibraryComponent.prototype.currentSelection;
    /** @type {?} */
    ContentsLibraryComponent.prototype.filters;
    /** @type {?} */
    ContentsLibraryComponent.prototype.firstFilter;
    /** @type {?} */
    ContentsLibraryComponent.prototype.secondFilter;
    /**
     * @type {?}
     * @private
     */
    ContentsLibraryComponent.prototype.fetch;
    /**
     * @type {?}
     * @private
     */
    ContentsLibraryComponent.prototype.rm;
}
//# sourceMappingURL=data:application/json;base64, 