import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { subMonths, addMonths, setYear, setMonth } from 'date-fns';
import { OnChange } from '../core/decorators';
/**
 * Calendar Component
 */
var CalendarComponent = /** @class */ (function () {
    function CalendarComponent() {
        /** calendar date change event, emit the selected date */
        this.select = new EventEmitter();
        this._value = new Date();
        /**
         * whether the calendar enable multiple selection
         * @default false
         */
        this.multiple = false;
        /**
         * whether the calendar is disabled
         * @default false
         */
        this.disabled = false;
        /**
         * calendar actived month date value
         * @docs-private
         */
        this.month = new Date();
        /**
         * month array
         * @docs-private
         */
        this.monthArray = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12]
        ];
        /**
         * year array
         * @docs-private
         */
        this.yearArray = [];
        /**
         * currently calendar show mode, default 'calendar'
         * @docs-private
         */
        this.mode = 'calendar';
        this.yearArray = this.getCurrentDecade(new Date());
        this.tempYear = new Date().getFullYear();
    }
    Object.defineProperty(CalendarComponent.prototype, "value", {
        /**
         * calendar selected value
         * @default new Date()
         */
        get: function () { return this._value; },
        set: function (v) {
            this._value = v;
            this.month = v;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(CalendarComponent.prototype, "yearMonthText", {
        /**
         * the text title show in the year or month mode
         * @readonly
         * @docs-private
         */
        get: function () {
            if (this.mode === 'year') {
                var copyYears = [];
                for (var _i = 0, _a = this.yearArray; _i < _a.length; _i++) {
                    var decade = _a[_i];
                    copyYears.push.apply(copyYears, decade);
                }
                return copyYears[0] + ' - ' + copyYears[copyYears.length - 1];
            }
            else if (this.mode === 'month') {
                return this.tempYear + '';
            }
            else {
                return '';
            }
        },
        enumerable: true,
        configurable: true
    });
    /**
     * get the current decade years the year belong to
     * @param {Date} date - date
     * @docs-private
     */
    CalendarComponent.prototype.getCurrentDecade = function (date) {
        var year = date.getFullYear();
        var years = [];
        var columnWidth = 4;
        var temp = [];
        for (var i = 0; i < 10; i++) {
            temp.push(+((year + '').slice(0, 3) + i));
            if (temp.length % columnWidth === 0) {
                years.push(temp);
                temp = [];
            }
            if (i === 9) {
                years.push(temp);
            }
        }
        return years;
    };
    CalendarComponent.prototype.onShowYearPanel = function () {
        this.mode = 'year';
    };
    CalendarComponent.prototype.onShowMonthPanel = function () {
        this.mode = 'month';
    };
    CalendarComponent.prototype.onReturnCalendar = function () {
        this.mode = 'calendar';
    };
    /**
     * last event
     * @docs-private
     */
    CalendarComponent.prototype.onLast = function () {
        if (this.mode === 'year') {
            // get the first year
            var firstYear = this.yearArray[0][0];
            this.yearArray = this.getCurrentDecade(new Date(firstYear - 1, 0, 1));
        }
        else if (this.mode === 'month') {
            this.tempYear = this.tempYear - 1;
            this.yearArray = this.getCurrentDecade(new Date(this.tempYear, 0, 1));
        }
        else {
            this.month = subMonths(this.month, 1);
            this.tempYear = this.month.getFullYear();
            this.yearArray = this.getCurrentDecade(this.month);
        }
    };
    /**
     * next event
     * @docs-private
     */
    CalendarComponent.prototype.onNext = function () {
        if (this.mode === 'year') {
            // get the last year
            var lastYear = this.yearArray.reduce(function (a, b) { return a.concat(b); }, []).pop()
                || new Date().getFullYear();
            // get next year decade
            this.yearArray = this.getCurrentDecade(new Date(lastYear + 1, 0, 1));
        }
        else if (this.mode === 'month') {
            this.tempYear = this.tempYear + 1;
            this.yearArray = this.getCurrentDecade(new Date(this.tempYear, 0, 1));
        }
        else {
            this.month = addMonths(this.month, 1);
            this.tempYear = this.month.getFullYear();
            this.yearArray = this.getCurrentDecade(this.month);
        }
    };
    /**
     * change year
     * @param {number} year - year
     * @docs-private
     */
    CalendarComponent.prototype.onSelectYear = function (year) {
        // currently show month date
        var date = this.month;
        var yearDate = setYear(date, year);
        // update currently show month date
        this.month = yearDate;
        this.tempYear = year;
        // return to calendar mode
        this.mode = 'calendar';
    };
    /**
     * change month
     * @param {number} month - month
     * @docs-private
     */
    CalendarComponent.prototype.onSelectMonth = function (month) {
        // currently show month date
        var date = this.month;
        var yearDate = setYear(date, this.tempYear);
        var monthDate = setMonth(yearDate, month - 1);
        // update currently show month date
        this.month = monthDate;
        // return to calendar mode
        this.mode = 'calendar';
    };
    /**
     * on select date
     * @param {Date} d - selected date
     * @docs-private
     */
    CalendarComponent.prototype.onSelectDate = function (d) {
        this.value = d;
        this.select.emit(this.value);
    };
    CalendarComponent.prototype.isCurrentYear = function (year) {
        return this.month.getFullYear() === year;
    };
    CalendarComponent.prototype.isCurrentMonth = function (month) {
        return (this.month.getMonth() + 1) === month;
    };
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], CalendarComponent.prototype, "select", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], CalendarComponent.prototype, "value", null);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], CalendarComponent.prototype, "multiple", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], CalendarComponent.prototype, "startDate", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], CalendarComponent.prototype, "endDate", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], CalendarComponent.prototype, "disabled", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Function)
    ], CalendarComponent.prototype, "disabledStrategy", void 0);
    CalendarComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-calendar',
            template: "<div class=\"nb-calendar-header\" [class.disabled]=\"disabled\"><table class=\"nb-calendar-header-table\"><tr><td class=\"month-col\"><div class=\"last-month\" title=\"last month\" (click)=\"onLast()\"><i class=\"iconfont icon-left\"></i></div></td><td class=\"year-month-col\"><div *ngIf=\"mode == 'calendar'\" class=\"year-month-col-content\"><div class=\"year-select\" (click)=\"onShowYearPanel()\"><span class=\"year-text\">{{ month.getFullYear() }}</span> <i class=\"iconfont icon-down\"></i></div><div class=\"month-select\" (click)=\"onShowMonthPanel()\"><span class=\"month-text\">{{ month.getMonth() + 1 }}</span> <i class=\"iconfont icon-down\"></i></div></div><div class=\"year-month-text\" *ngIf=\"mode != 'calendar'\" (click)=\"onReturnCalendar()\">{{ yearMonthText }}</div></td><td class=\"month-col\"><div class=\"next-month\" title=\"next month\" (click)=\"onNext()\"><i class=\"iconfont icon-right\"></i></div></td></tr></table></div><div *ngIf=\"mode == 'calendar'\" class=\"nb-calendar-month-view-panel\"><nb-month-view [disabled]=\"disabled\" [multiple]=\"multiple\" [startDate]=\"startDate\" [endDate]=\"endDate\" [value]=\"value\" [month]=\"month\" [disabledStrategy]=\"disabledStrategy\" (select)=\"onSelectDate($event)\"></nb-month-view></div><div *ngIf=\"mode == 'year'\" class=\"nb-calendar-year-select-panel\"><table class=\"calendar-year-table\"><tr *ngFor=\"let decade of yearArray\"><td *ngFor=\"let year of decade\" (click)=\"onSelectYear(year)\" class=\"calendar-year-table-td\" [class.current-year]=\"isCurrentYear(year)\"><div class=\"inner-text\">{{ year }}</div></td></tr></table></div><div *ngIf=\"mode === 'month'\" class=\"nb-calendar-month-select-panel\"><table class=\"calendar-month-table\"><tr *ngFor=\"let item of monthArray\"><td *ngFor=\"let innerItem of item\" (click)=\"onSelectMonth(innerItem)\" class=\"calendar-month-table-td\" [class.current-month]=\"isCurrentMonth(innerItem)\"><div class=\"inner-text\">{{ innerItem }}</div></td></tr></table></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-calendar'
            },
            exportAs: 'nbCalendar'
        }),
        tslib_1.__metadata("design:paramtypes", [])
    ], CalendarComponent);
    return CalendarComponent;
}());
export { CalendarComponent };
//# sourceMappingURL=calendar.js.map