/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, forwardRef, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { differenceInDays, format } from 'date-fns';
import * as es from 'date-fns/locale/es';
/** @type {?} */
const locales = { es };
/** @type {?} */
const placeholders = {
    es: 'Selecciona fecha'
};
/** @type {?} */
const defaultFormat = {
    es: 'D/MM/YYYY'
};
export class HtmlEditorComponent {
    constructor() {
        this.close = new EventEmitter();
        this.saveValue = new EventEmitter();
        this.newTheme = new EventEmitter();
        this.title = '';
        this.abstract = '';
        this.msgErr = '';
        this.msgErrData = '';
        this.duration = 0;
        this.tagsCustom = [];
        this.Editor = ClassicEditor;
        this.value = '';
        this.config = {
            toolbar: ['heading', '|', 'bold', 'italic', '|', 'undo', 'redo'],
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
                ]
            }
        };
        this.defaultOptions = {
            barTitleFormat: 'MMMM YYYY',
            dayNamesFormat: 'dd',
            firstCalendarDay: 1,
            addClass: 'input',
            useEmptyBarTitle: false
        };
        /**
         * Invoked when the model has been changed
         */
        this.onChange = (_) => {
        };
        /**
         * Invoked when the model has been touched
         */
        this.onTouched = () => {
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.finalOptions = Object.assign({
            displayFormat: defaultFormat['es'],
            locale: locales['es'],
            placeholder: placeholders['es']
        }, this.defaultOptions, {}
        // this.options
        );
    }
    /**
     * Method that is invoked on an update of a model.
     * @return {?}
     */
    updateChanges() {
        this.onChange(this.value);
    }
    /**
     * Writes a new item to the element.
     * @param {?} value the value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
        this.updateChanges();
    }
    /**
     * Registers a callback function that should be called when the control's value changes in the UI.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * Registers a callback function that should be called when the control receives a blur event.
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @return {?}
     */
    save() {
        /** @type {?} */
        const tagsCustom = this.tagsCustom.map(name => ({ name, type: 'manual' }));
        /** @type {?} */
        const flagDate = this.operatorDates(this.startDate, this.endDate);
        /** @type {?} */
        const flagData = this.validData();
        if (flagDate && flagData) {
            /** @type {?} */
            const data = {
                'title': this.title,
                'abstract': this.abstract,
                'tags': tagsCustom,
                'startDate': this.startDate,
                'theme': this.theme,
                'duration': this.duration,
                'html': this.value
            };
            this.saveValue.emit(data);
        }
    }
    /**
     * @return {?}
     */
    validData() {
        /** @type {?} */
        let flag = true;
        if (!this.title || !this.value || !this.startDate || !this.theme || !this.endDate) {
            flag = false;
            this.msgErrData = 'Debes completar todos los campos para la creación del contenido';
        }
        return flag;
    }
    /**
     * @param {?} start
     * @param {?} end
     * @return {?}
     */
    operatorDates(start, end) {
        /** @type {?} */
        let flag = true;
        this.msgErr = '';
        /** @type {?} */
        const startDate = format(start, 'YYYY-MM-DD');
        /** @type {?} */
        const endDate = format(end, 'YYYY-MM-DD');
        this.duration = differenceInDays(endDate, startDate);
        if (this.duration < 0) {
            flag = false;
            this.msgErr = 'la fecha de vencimiento no puede ser inferior a la fecha de disponibilidad';
        }
        else if (this.duration === 0 || this.duration === -0) {
            this.duration = 1;
        }
        return flag;
    }
    /**
     * @param {?} t
     * @return {?}
     */
    selectThemeForContent(t) {
        this.theme = t;
    }
}
HtmlEditorComponent.decorators = [
    { type: Component, args: [{
                selector: 'bidi-html-editor',
                template: "<div class=\"content-preview\">\n    <svg (click)=\"close.emit()\" 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;\">\n            <div class=\"page-title modal-header\">\n                <h2 class=\"is-size-5\">Agrega contenido personalizado</h2>\n            </div>\n            <div class=\"content-add\">\n                <div class=\"field\">\n                    <label for=\"\" class=\"is-size-7 is-ff-light\">T\u00EDtulo</label>\n                    <div class=\"control\">\n                        <input class=\"input\" placeholder=\"Titulo recurso\" type=\"text\" [(ngModel)]=\"title\">\n                    </div>\n                </div>\n                <div class=\"field\">\n                    <label for=\"\" class=\"is-size-7 is-ff-light\">Abstract</label>\n                    <div class=\"control\">\n                        <input class=\"input\" placeholder=\"Titulo recurso\" type=\"text\" [(ngModel)]=\"abstract\">\n                    </div>\n                </div>\n                <div class=\"field\">\n                    <label for=\"\" class=\"is-size-7 is-ff-light\">Contenido HTML</label>\n                    <ckeditor [editor]=\"Editor\" (change)=\"onChange($event)\" [(ngModel)]=\"value\" [config]=\"config\" ></ckeditor>\n                </div>\n                <div class=\"field tags-custom\">\n                    <label for=\"\" class=\"is-size-7 is-ff-light\">Agrega tags</label>\n                    <tag-input [(ngModel)]='tagsCustom' placeholder=\"Ingresa un nuevo tag\" secondaryPlaceholder=\"Ingresa un tag\"></tag-input>\n                </div>\n                <div class=\"field-dates\">\n                    <div class=\"columns\">\n                        <div class=\"column\"><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 [(ngModel)]=\"startDate\" [options]=\"finalOptions\"></ng-datepicker>\n                                </div>\n                            </div></div>\n                        <div class=\"column\">\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                                    </div>\n                        </div>\n                    </div>\n                    \n                    \n                    <span class=\"error has-background-danger has-text-light is-size-6 is-uppercase has-text-centered\">\n                        {{ msgErr }}\n                    </span>\n                </div>\n                <div 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)=\"newTheme.emit(true)\" style=\"cursor: pointer;\">crear un nuevo tema</span></p>\n                    </div>\n                    <span class=\"error has-background-danger has-text-light is-size-6 is-uppercase has-text-centered\">\n                        {{ msgErrData }}\n                    </span>\n                  </div>\n                <div class=\"buttons is-centered\">\n                    <button class=\"button is-tt-secondary is-outlined is-size-7 is-text-button\" (click)=\"close.emit()\">Cancelar</button>\n                    <button class=\"button is-tt-secondary is-outlined is-size-7 is-text-button\" (click)=\"save()\">Guardar</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n",
                providers: [{
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => HtmlEditorComponent),
                        multi: true
                    }],
                styles: ["h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}.field-bk{height:31px;padding:5px 10px;font-size:14px;width:200px;outline:0;border:1px solid #dfe3e9}.ck-content{height:100px}.content-preview{overflow:scroll;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}"]
            }] }
];
/** @nocollapse */
HtmlEditorComponent.ctorParameters = () => [];
HtmlEditorComponent.propDecorators = {
    close: [{ type: Output }],
    saveValue: [{ type: Output }],
    newTheme: [{ type: Output }],
    themes: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    HtmlEditorComponent.prototype.close;
    /** @type {?} */
    HtmlEditorComponent.prototype.saveValue;
    /** @type {?} */
    HtmlEditorComponent.prototype.newTheme;
    /** @type {?} */
    HtmlEditorComponent.prototype.themes;
    /** @type {?} */
    HtmlEditorComponent.prototype.themeSelect;
    /** @type {?} */
    HtmlEditorComponent.prototype.startDate;
    /** @type {?} */
    HtmlEditorComponent.prototype.endDate;
    /** @type {?} */
    HtmlEditorComponent.prototype.finalOptions;
    /** @type {?} */
    HtmlEditorComponent.prototype.theme;
    /** @type {?} */
    HtmlEditorComponent.prototype.title;
    /** @type {?} */
    HtmlEditorComponent.prototype.abstract;
    /** @type {?} */
    HtmlEditorComponent.prototype.msgErr;
    /** @type {?} */
    HtmlEditorComponent.prototype.msgErrData;
    /** @type {?} */
    HtmlEditorComponent.prototype.duration;
    /** @type {?} */
    HtmlEditorComponent.prototype.tagsCustom;
    /** @type {?} */
    HtmlEditorComponent.prototype.Editor;
    /** @type {?} */
    HtmlEditorComponent.prototype.value;
    /** @type {?} */
    HtmlEditorComponent.prototype.config;
    /**
     * @type {?}
     * @private
     */
    HtmlEditorComponent.prototype.defaultOptions;
    /**
     * Invoked when the model has been changed
     * @type {?}
     */
    HtmlEditorComponent.prototype.onChange;
    /**
     * Invoked when the model has been touched
     * @type {?}
     */
    HtmlEditorComponent.prototype.onTouched;
}
//# sourceMappingURL=data:application/json;base64, 