/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { distanceInWordsToNow, addDays, differenceInDays, format } from 'date-fns';
import * as locale from 'date-fns/locale/es';
import * as es from 'date-fns/locale/es';
import groupBy from 'lodash/groupBy';
/** @type {?} */
var locales = { es: es };
/** @type {?} */
var placeholders = {
    es: 'Selecciona fecha'
};
/** @type {?} */
var defaultFormat = {
    es: 'D/MM/YYYY'
};
var ContentPreviewComponent = /** @class */ (function () {
    function ContentPreviewComponent() {
        this.close = new EventEmitter();
        this.resSelected = new EventEmitter();
        this.newTheme = new EventEmitter();
        this.isOpen = true;
        this.flag = false;
        this.contentEdit = false;
        this.tagsCustom = [];
        this.tagsContenido = [];
        this.defaultOptions = {
            barTitleFormat: 'MMMM YYYY',
            dayNamesFormat: 'dd',
            firstCalendarDay: 1,
            addClass: 'input',
            useEmptyBarTitle: false
        };
    }
    Object.defineProperty(ContentPreviewComponent.prototype, "value", {
        // form: FormGroup;
        get: 
        // form: FormGroup;
        /**
         * @return {?}
         */
        function () {
            return this.innerValue;
        },
        set: /**
         * @param {?} date
         * @return {?}
         */
        function (date) {
            if (this.innerValue !== date) {
                this.innerValue = date;
            }
            if (this.onChangeCallback) {
                this.onChangeCallback(this.innerValue);
            }
        },
        enumerable: true,
        configurable: true
    });
    // constructor(private fb: FormBuilder) {}
    // constructor(private fb: FormBuilder) {}
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.ngOnInit = 
    // constructor(private fb: FormBuilder) {}
    /**
     * @return {?}
     */
    function () {
        this.getContEje();
        this.msgErrDatePlanning = false;
        this.sinceDate = distanceInWordsToNow(new Date(this.resource.processed_at), { locale: locale, addSuffix: true });
        if (this.dataEditResource) {
            this.endDate = addDays(addDays(this.dataEditResource.startDate, 1), this.dataEditResource.duration);
            this.startDate = addDays(this.dataEditResource.startDate, 1);
            this.themeSelect = this.dataEditResource.theme;
            this.theme = this.dataEditResource.theme;
            this.idContent = this.dataEditResource._id;
            // this.form = this.fb.group({
            //  themeControl: this.dataEditResource.theme
            // });
        }
        this.finalOptions = Object.assign({
            displayFormat: defaultFormat['es'],
            locale: locales['es'],
            placeholder: placeholders['es']
        }, this.defaultOptions, {}
        // this.options
        );
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    ContentPreviewComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        if (changes.resource) {
            if (this.resource.type === 'planning') {
                /** @type {?} */
                var groupedContents_1 = groupBy(this.resource.contents, 'theme._id');
                this.resourceProcessed = tslib_1.__assign({}, this.resource, { themes: this.resource.themes.map(function (theme) { return (tslib_1.__assign({}, theme, { contents: groupedContents_1[theme._id] })); }) });
            }
            else {
                this.resourceProcessed = this.resource;
            }
        }
    };
    /**
     * @param {?} t
     * @return {?}
     */
    ContentPreviewComponent.prototype.selectThemeForContent = /**
     * @param {?} t
     * @return {?}
     */
    function (t) {
        this.theme = t;
    };
    /**
     * @param {?} date
     * @param {?} contents
     * @return {?}
     */
    ContentPreviewComponent.prototype.validResources = /**
     * @param {?} date
     * @param {?} contents
     * @return {?}
     */
    function (date, contents) {
        /** @type {?} */
        var flagTmp = false;
        contents.map(function (c) {
            /** @type {?} */
            var dateCal = addDays(date, c.offset);
            if (format(dateCal, 'YYYY') > format(date, 'YYYY')) {
                flagTmp = true;
                return false;
            }
        });
        this.msgErrDatePlanning = flagTmp;
    };
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.closeModal = /**
     * @return {?}
     */
    function () {
        this.msgErrDatePlanning = false;
    };
    /**
     * @param {?} res
     * @return {?}
     */
    ContentPreviewComponent.prototype.saveResourceSelected = /**
     * @param {?} res
     * @return {?}
     */
    function (res) {
        this.msgErr = '';
        this.msgErrT = '';
        this.flag = false;
        /** @type {?} */
        var startDate = format(this.startDate, 'YYYY-MM-DD');
        /** @type {?} */
        var endDate = format(this.endDate, 'YYYY-MM-DD');
        /** @type {?} */
        var durationCustom = differenceInDays(endDate, startDate);
        if (!this.startDate) {
            this.flag = true;
            this.msgErr = 'Debes seleccionar una fecha';
        }
        if (res.type !== 'planning') {
            if (durationCustom < 0) {
                this.flag = true;
                this.msgErr = 'La fecha de vencimiento no puede ser inferior a la fecha de disponibilidad';
            }
            if (!this.theme) {
                this.msgErrT = 'Debes elegir un tema';
                this.flag = true;
            }
        }
        if (!this.flag) {
            if (res.type !== 'planning') {
                this.data = {
                    'resource': [this.editObj(this.resourceProcessed)],
                    'theme': this.theme,
                    'date': this.startDate,
                    'idContent': this.idContent,
                    'duration': (durationCustom > 0) ? durationCustom : 1,
                    'update': (this.dataEditResource) ? true : false
                };
            }
            else {
                res.title = (this.titleE) ? this.titleE : this.resourceProcessed.title;
                this.data = { 'planning': res, 'date': this.startDate };
            }
            this.resSelected.emit(this.data);
            this.closePreview();
        }
    };
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.editResourceSelected = /**
     * @return {?}
     */
    function () {
        this.contentEdit = true;
    };
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.addTheme = /**
     * @return {?}
     */
    function () {
        this.newTheme.emit(true);
    };
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.closePreview = /**
     * @return {?}
     */
    function () {
        this.isOpen = false;
        this.close.emit(this.isOpen);
    };
    /**
     * @param {?} res
     * @return {?}
     */
    ContentPreviewComponent.prototype.editObj = /**
     * @param {?} res
     * @return {?}
     */
    function (res) {
        /** @type {?} */
        var tagsCustom = this.tagsCustom.map(function (name) { return ({ name: name, type: 'manual' }); });
        /** @type {?} */
        var dataEdit = {
            'abstract': (this.abstractE) ? this.abstractE : res.abstract,
            '_id': res.id,
            'previewUrl': res.previewUrl,
            'processed_at': res.processed_at,
            'subtitle': res.subtitle,
            'tags': (tagsCustom) ? res.tags.concat(tagsCustom) : res.tags,
            'title': (this.titleE) ? this.titleE : res.title,
            'type': res.type,
            'url': res.url,
            'user': res.user,
            'zipUrl': res.zipUrl
        };
        return dataEdit;
    };
    /**
     * @return {?}
     */
    ContentPreviewComponent.prototype.getContEje = /**
     * @return {?}
     */
    function () {
        this.tagsContenido = this.resourceProcessed.tags.filter(function (tag) { return tag.type === 'contenido'; });
    };
    ContentPreviewComponent.decorators = [
        { type: Component, args: [{
                    selector: 'bidi-content-preview',
                    template: "<div class=\"modal-content-container has-column-direction is-align-items-center is-content-center\" [ngClass]=\"{'active': msgErrDatePlanning}\">\n    <div class=\"modal-container\">\n        <div class=\"close-modal\">\n            <button class=\"button\" (click)=\"closeModal()\">\n                <svg class=\"icon-svg-tt-cancel icon has-text-dark\">\n                    <use xlink:href=\"#icon-svg-tt-cancel\"></use>\n                </svg>\n            </button>\n        </div>\n        <div class=\"tt-modal-content\">\n            <div class=\"page-title modal-header\">\n                <h2 class=\"is-size-5\">Agregar Secuencia</h2>\n                <div class=\"modal-body\" style=\"max-height: 100%; overflow: unset;\">\n                    <div class=\"text-alert\">\n                        <h3 class=\"is-size-7\">Estas por agregar una secuencia con recursos que quedar\u00E1n planificados para el a\u00F1o siguiente</h3>\n                    </div>\n                    <div class=\"buttons is-centered\">\n                        <button class=\"button is-tt-secondary is-outlined is-size-7 is-text-button\" (click)=\"closeModal()\">cambiar fecha</button>\n                        <button class=\"button is-tt-secondary is-outlined is-size-7 is-text-button\" (click)=\"saveResourceSelected(resourceProcessed)\">continuar</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"content-preview\">\n  <svg (click)=\"closePreview()\" class=\"icon-svg-tt-angle-right is-pulled-left\">\n    <use xlink:href=\"#icon-svg-tt-angle-right\"></use>\n  </svg>\n  <div class=\"columns\">\n    <div class=\"column\" style=\"padding-top: 8px;padding-left: 0;overflow: auto\">\n      <div class=\"editable-fields-container\">\n        <div class=\"is-pulled-right\" (click)=\"editResourceSelected()\" *ngIf=\"saveResource;\">\n          <a class=\"button is-circle-x-small is-tt-secondary is-outlined\" style=\"border-radius: 999999px;\">\n            <svg class=\"icon-bidi-pencil icon is-small\">\n              <use xlink:href=\"#icon-bidi-pencil\"></use>\n            </svg>\n          </a>\n        </div>\n        <div style=\"margin-right: 39px;\">\n          <h3 [textContent]=\"resourceProcessed.title\" (input)=\"titleE=$event.target.textContent\" [contentEditable]=\"contentEdit\"\n            [ngClass]=\"{'editable': contentEdit}\" class=\"is-size-5 is-ff-black\">\n            {{ resourceProcessed.title }}\n          </h3>\n          <p [textContent]=\"resourceProcessed.abstract\" (input)=\"abstractE=$event.target.textContent\" [contentEditable]=\"contentEdit\"\n            [ngClass]=\"{'editable': contentEdit}\" class=\"is-size-6\">\n            {{resourceProcessed.abstract}}\n          </p>\n          <div>\n            <p class=\"is-size-7 is-ff-light\">Subido por: {{ resourceProcessed.user }} {{ sinceDate }}</p>\n<!--             <p class=\"is-size-7 is-ff-light\" style=\"margin-top: -6px;\">Recurso de tipo: {{ resourceProcessed.type }}</p>\n -->          </div>\n        </div>\n      </div>\n      <div class=\"content-tags\">\n        <p class=\"is-size-6 is-ff-light is-uppercase\">Contenidos del eje tematico abordados por este recurso</p>\n        <ul>\n          <li *ngFor=\"let contTag of tagsContenido\" >{{ contTag.name }}</li>\n        </ul>\n      </div>\n      \n      \n      <div class=\"content-data-extra\">\n          <div *ngIf=\"resourceProcessed.type !== 'planning'\" class=\"tags-custom\">\n              <p for=\"\" class=\"is-size-6 is-ff-light\">Agrega tags personalizados</p>\n              <tag-input\n                  [(ngModel)]='tagsCustom'\n                  placeholder=\"Ingresa un nuevo tag\"\n                  secondaryPlaceholder=\"Ingresa un tag\"\n              >\n              </tag-input>\n          </div>\n        <p class=\"is-size-6 is-ff-light\">\u00BFEntre que fechas vas a trabajar con este contenido?</p>\n        <div class=\"columns\">\n          <div class=\"column is-relative\">\n            <div class=\"field\">\n              <label for=\"\" class=\"is-size-7 is-ff-light\">Desde (fecha de publicaci\u00F3n)</label>\n              <div class=\"control\">\n                <ng-datepicker *ngIf=\"resourceProcessed.type !== 'planning'\" [(ngModel)]=\"startDate\" [options]=\"finalOptions\"></ng-datepicker>\n                <ng-datepicker *ngIf=\"resourceProcessed.type === 'planning'\" (ngModelChange)=\"validResources($event, resourceProcessed.contents)\" [(ngModel)]=\"startDate\" [options]=\"finalOptions\"></ng-datepicker>\n              </div>\n              <p class=\"help\">Esta es la fecha en la que este contenido estar\u00E1 disponible para tus estudiantes</p>\n            </div>\n          </div>\n          <div *ngIf=\"resourceProcessed.type !== 'planning'\" class=\"column is-relative\">\n            <div class=\"field\">\n              <label class=\"is-size-7 is-ff-light\">Hasta (fecha de entrega o vencimiento)</label>\n              <div class=\"control\">\n                <ng-datepicker [(ngModel)]=\"endDate\" [options]=\"finalOptions\"></ng-datepicker>\n              </div>\n              <p class=\"help\">Esta es la fecha de entrega de este contenido que ver\u00E1n tus estudiantes en su aplicacion\n                TICMAS ESTUDIANTES</p>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"resourceProcessed.type !== 'planning'\" class=\"control\">\n          <p class=\"is-size-6 is-ff-light\">Indica para que tema es este contenido</p>\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-full-widthselect is-full-width\">\n                  <select [(ngModel)]=\"theme\" (change)=\"selectThemeForContent(theme)\" class=\"is-full-width\" placeholder=\"Selecciona un tema\">\n                    <option selected=\"selected\" *ngIf=\"!themeSelect\">Seleccionar Tema</option>\n                    <option *ngIf=\"themeSelect\" [ngValue]=\"themeSelect\">{{ themeSelect.title }}</option>\n                      <ng-container *ngFor=\"let theme of themes; index as i\">\n                          <option *ngIf=\"themeSelect && themeSelect._id !== theme._id\" [ngValue]=\"theme\">\n                                {{ theme.title }}\n                          </option>\n                          <option *ngIf=\"!themeSelect\" [ngValue]=\"theme\">\n                              {{ theme.title }}\n                        </option>\n                      </ng-container>\n                  </select>\n              </div>\n            </div>\n            <p class=\"help\">Es recomendable que el contenido que agregues est\u00E9 subordinado a un tema\n              De este modo tu estudiante podr\u00E1 contextualizarlo. Tambien puedes <span class=\"has-text-tt-secondary\"\n                (click)=\"addTheme()\" style=\"cursor: pointer;\">crear un nuevo tema</span></p>\n          </div>\n        </div>\n      </div>\n      <div class=\"msg-date-err\">\n        <label *ngIf=\"msgErr\" class=\"is-size-7 is-ff-regular has-text-danger\">{{ msgErr }}</label>\n      </div>\n      <div class=\"msg-date-err\">\n        <label *ngIf=\"msgErrT\" class=\"is-size-7 is-ff-regular has-text-danger\">{{ msgErrT }}</label>\n      </div>\n      <div class=\"buttons is-right\">\n        <button class=\"button is-tt-secondary is-size-7 is-text-button\" (click)=\"saveResourceSelected(resourceProcessed)\">publicar</button>\n      </div>\n      <div class=\"tag-container\">\n        <p class=\"is-size-8 is-text-grey is-ff-light is-uppercase\">Tags de este recurso</p>\n        <span *ngFor=\"let tag of resourceProcessed.tags\" class=\"is-size-8 is-ff-bold is-text-grey\">#{{tag.name}}, </span>\n      </div>\n    \n    </div>\n    <div class=\"column\">\n      <div *ngIf=\"resourceProcessed.type === 'planning'\" class=\"planification-preview-content\">\n        <ul>\n          <li *ngFor=\"let theme of resourceProcessed.themes\">\n            <h3 class=\"is-size-5 is-ff-bold has-text-tt-secondary\">Tema: {{theme.title}}</h3>\n            <p class=\"is-size-6 is-ff-bold\" style=\"margin-top:0;\">Contenidos: </p>\n            <ul>\n              <li *ngFor=\"let content of theme.contents\" class=\"resource-preview\">\n                <h3 class=\"is-size-6 is-ff-black\">{{ content.resource.title }}</h3>\n                <p class=\"is-size-7\">{{content.resource.abstract}}</p>\n                <p class=\"is-size-7 is-ff-light\">\n                  Subido por: {{ content.resource.user }} {{ sinceDate }} - Recurso de tipo: {{ content.resource.type\n                  }}</p>\n                <span *ngFor=\"let tag of content.resource.tags\" class=\"is-size-7 is-ff-bold\">#{{tag.name}}, </span>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </div>\n      <iframe *ngIf=\"resourceProcessed.type !== 'planning'\" [src]=\"resourceProcessed.url | safe\" frameborder=\"0\"\n        [ngClass]=\"{'video-container': resourceProcessed.type === 'video'}\"></iframe>\n    </div>\n  </div>\n",
                    styles: [".content-preview{height:100%;padding:0 0 0 15px}.content-preview .columns{padding-bottom:0;height:100%;margin-right:0;margin-top:0}.content-preview .columns .column{height:100%;padding-bottom:0;padding-right:0;padding-top:0}iframe{width:100%;height:100%}iframe.video-container{height:56.25%;background:#000}.planification-preview-content{height:100%;overflow:auto}.planification-preview-content ul{margin:9px 0 0;list-style:none}.planification-preview-content ul li h3,.planification-preview-content ul li p{margin-bottom:0}.planification-preview-content .resource-preview{padding:7px;border:1px solid #0cf;width:97%}.editable{border:2px solid #0cf;padding:3px;margin-bottom:2px}.btn-actions{text-align:center;padding:4%}.btn-actions .button{margin-left:1%}.tag-container{margin-top:10px}.content-data-extra{margin-top:15px;padding-top:15px;border-top:1px solid #e5e5e5}.editable-fields-container{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #e5e5e5}.editable-fields-container h3::first-letter,.editable-fields-container p::first-letter{text-transform:uppercase}.ngx-datepicker-container .ngx-datepicker-input{margin-top:0!important}.modal-content-container{position:fixed;z-index:1000;top:0;left:-125.6%;right:0;bottom:0;background:rgba(0,0,0,.5);display:none}.modal-content-container.active{display:flex}.modal-container{background:#fff;width:50%;height:auto}.modal-container label{display:inline-block;font-size:.8em!important;margin-bottom:4px}.modal-container .title{font-size:1.2em;padding-top:13px}.modal-container input{margin-bottom:7px}.modal-container .tt-modal-content .modal-header{margin-bottom:15px;padding:10px}.modal-container .tt-modal-content .modal-body{max-height:160px;overflow-y:auto;overflow-x:hidden;min-height:120px;padding:15px}.modal-container .tt-modal-content .modal-footer{padding:15px}.close-modal{float:right}.text-alert{margin:5%}.tags-custom{margin-bottom:23px}.tags-custom .ng2-tag-input{border:1px solid #e5e5e5!important;margin-top:6px!important;padding:0!important}"]
                }] }
    ];
    ContentPreviewComponent.propDecorators = {
        resource: [{ type: Input }],
        saveResource: [{ type: Input }],
        themes: [{ type: Input }],
        dataEditResource: [{ type: Input }],
        close: [{ type: Output }],
        resSelected: [{ type: Output }],
        newTheme: [{ type: Output }]
    };
    return ContentPreviewComponent;
}());
export { ContentPreviewComponent };
if (false) {
    /** @type {?} */
    ContentPreviewComponent.prototype.resource;
    /** @type {?} */
    ContentPreviewComponent.prototype.saveResource;
    /** @type {?} */
    ContentPreviewComponent.prototype.themes;
    /** @type {?} */
    ContentPreviewComponent.prototype.dataEditResource;
    /** @type {?} */
    ContentPreviewComponent.prototype.close;
    /** @type {?} */
    ContentPreviewComponent.prototype.resSelected;
    /** @type {?} */
    ContentPreviewComponent.prototype.newTheme;
    /** @type {?} */
    ContentPreviewComponent.prototype.isOpen;
    /** @type {?} */
    ContentPreviewComponent.prototype.themeSelect;
    /** @type {?} */
    ContentPreviewComponent.prototype.theme;
    /** @type {?} */
    ContentPreviewComponent.prototype.sinceDate;
    /** @type {?} */
    ContentPreviewComponent.prototype.data;
    /** @type {?} */
    ContentPreviewComponent.prototype.finalOptions;
    /** @type {?} */
    ContentPreviewComponent.prototype.resourceProcessed;
    /** @type {?} */
    ContentPreviewComponent.prototype.idContent;
    /** @type {?} */
    ContentPreviewComponent.prototype.startDate;
    /** @type {?} */
    ContentPreviewComponent.prototype.endDate;
    /** @type {?} */
    ContentPreviewComponent.prototype.flag;
    /** @type {?} */
    ContentPreviewComponent.prototype.msgErr;
    /** @type {?} */
    ContentPreviewComponent.prototype.msgErrT;
    /** @type {?} */
    ContentPreviewComponent.prototype.msgErrDatePlanning;
    /** @type {?} */
    ContentPreviewComponent.prototype.contentEdit;
    /** @type {?} */
    ContentPreviewComponent.prototype.titleE;
    /** @type {?} */
    ContentPreviewComponent.prototype.abstractE;
    /** @type {?} */
    ContentPreviewComponent.prototype.tagsCustom;
    /** @type {?} */
    ContentPreviewComponent.prototype.tagsContenido;
    /**
     * @type {?}
     * @private
     */
    ContentPreviewComponent.prototype.innerValue;
    /**
     * @type {?}
     * @private
     */
    ContentPreviewComponent.prototype.onChangeCallback;
    /**
     * @type {?}
     * @private
     */
    ContentPreviewComponent.prototype.defaultOptions;
}
//# sourceMappingURL=data:application/json;base64, 