import { Component, ViewEncapsulation, Input, ElementRef, Output, ContentChild, EventEmitter, HostBinding } from '@angular/core';
import * as moment from 'moment';
import 'moment/locale/zh-cn';
var NzCalendarComponent = (function () {
    function NzCalendarComponent(_elementRef) {
        this._elementRef = _elementRef;
        this._weeksCalendar = [];
        this._quartersCalendar = [];
        this._listOfWeekName = [];
        this._listOfMonthName = [];
        this._listOfYearName = [];
        this._yearUnit = '年';
        this._monthUnit = '月';
        this._showMonth = moment(new Date()).month();
        this._showYear = moment(new Date()).year();
        this._value = new Date();
        this._locale = 'zh-cn';
        this.nzClickDay = new EventEmitter();
        this.nzClickMonth = new EventEmitter();
        this.nzClearTime = true;
        this.nzDatePicker = false;
        this.nzMode = 'year';
        this.nzFullScreen = true;
        this.nzShowHeader = true;
        this._el = this._elementRef.nativeElement;
    }
    Object.defineProperty(NzCalendarComponent.prototype, "nzValue", {
        get: function () {
            return this._value || new Date();
        },
        set: function (value) {
            if (this._value === value) {
                return;
            }
            this._value = value || new Date();
            this._showMonth = moment(this._value).month();
            this._showYear = moment(this._value).year();
            this._buildCalendar();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzCalendarComponent.prototype, "nzShowYear", {
        get: function () {
            return this._showYear;
        },
        set: function (value) {
            this._showYear = value;
            this._buildCalendar();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzCalendarComponent.prototype, "nzShowMonth", {
        get: function () {
            return this._showMonth;
        },
        set: function (value) {
            this._showMonth = value;
            this._buildCalendar();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzCalendarComponent.prototype, "nzLocale", {
        get: function () {
            return this._locale;
        },
        set: function (value) {
            this._locale = value;
            moment.locale(this._locale);
        },
        enumerable: true,
        configurable: true
    });
    NzCalendarComponent.prototype._removeTime = function (date) {
        if (this.nzClearTime) {
            return date.hour(0).minute(0).second(0).millisecond(0);
        }
        else {
            return date;
        }
    };
    ;
    NzCalendarComponent.prototype._clickDay = function ($event, day) {
        $event.preventDefault();
        $event.stopPropagation();
        if (day.disabled) {
            return;
        }
        this.nzClickDay.emit(day);
    };
    ;
    NzCalendarComponent.prototype._clickMonth = function ($event, month) {
        $event.preventDefault();
        $event.stopPropagation();
        this.nzClickMonth.emit(month);
    };
    ;
    NzCalendarComponent.prototype._buildMonth = function (d) {
        var weeks = [];
        var _rawDate = this._removeTime(d);
        var start = _rawDate.clone().date(1).day(0);
        var month = _rawDate.clone();
        var done = false;
        var date = start.clone();
        var monthIndex = date.month();
        var count = 0;
        while (!done) {
            weeks.push({ days: this._buildWeek(date.clone(), month) });
            date.add(1, 'w');
            done = count++ > 4;
            monthIndex = date.month();
        }
        return weeks;
    };
    ;
    NzCalendarComponent.prototype._buildWeek = function (date, month) {
        var days = [];
        for (var i = 0; i < 7; i++) {
            days.push({
                number: date.date(),
                isLastMonth: date.month() < month.month(),
                isNextMonth: date.month() > month.month(),
                isCurrentDay: date.isSame(new Date(), 'day'),
                isSelectedDay: date.isSame(this.nzValue, 'day'),
                title: date.format('YYYY-MM-DD'),
                date: date,
                disabled: this.nzDisabledDate && this.nzDisabledDate(date.toDate()),
                firstDisabled: this.nzDisabledDate && this.nzDisabledDate(date.toDate()) && (date.day() === 0 || (date.day() !== 0 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().subtract(1, 'day').toDate()))),
                lastDisabled: this.nzDisabledDate && this.nzDisabledDate(date.toDate()) && (date.day() === 6 || (date.day() !== 6 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().add(1, 'day').toDate())))
            });
            date = date.clone();
            date.add(1, 'd');
        }
        return days;
    };
    ;
    NzCalendarComponent.prototype._buildYears = function (date) {
        var quarters = [];
        var months = [];
        for (var i = 0; i < 12; i++) {
            months.push({
                index: i,
                name: this._listOfMonthName[i],
                isCurrentMonth: moment(new Date()).month() === i && date.isSame(new Date(), 'year'),
                isSelectedMonth: this._showMonth === i
            });
            if ((i + 1) % 3 === 0) {
                quarters.push(months);
                months = [];
            }
        }
        return quarters;
    };
    ;
    NzCalendarComponent.prototype._buildCalendar = function () {
        moment.locale(this._locale);
        /** TODO replace with real i18n*/
        if (this._locale !== 'zh-cn') {
            try {
                this._yearUnit = moment.duration(12, 'month').humanize().split(' ')[1][0].toUpperCase() + moment.duration(12, 'month').humanize().split(' ')[1].slice(1, moment.duration(12, 'month').humanize().split(' ')[1].length);
                this._monthUnit = moment.duration(4, 'week').humanize().split(' ')[1][0].toUpperCase() + moment.duration(4, 'week').humanize().split(' ')[1].slice(1, moment.duration(4, 'week').humanize().split(' ')[1].length);
            }
            catch (e) {
            }
        }
        this._listOfYearName = this._generateYears(this._showYear);
        this._listOfWeekName = moment.weekdaysMin();
        this._listOfMonthName = moment.months();
        var date = moment(this.nzValue).year(this._showYear).month(this._showMonth);
        this._weeksCalendar = this._buildMonth(date);
        this._quartersCalendar = this._buildYears(date);
    };
    ;
    NzCalendarComponent.prototype._generateYears = function (year) {
        var listOfYears = [];
        for (var _i = 0, _a = Array.from(Array(20).keys()); _i < _a.length; _i++) {
            var i = _a[_i];
            listOfYears.push(i - 10 + year);
        }
        return listOfYears;
    };
    ;
    NzCalendarComponent.prototype.ngOnInit = function () {
        this._buildCalendar();
    };
    return NzCalendarComponent;
}());
export { NzCalendarComponent };
NzCalendarComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-calendar',
                encapsulation: ViewEncapsulation.None,
                template: "\n    <div\n      [class.ant-fullcalendar-fullscreen]=\"nzFullScreen\"\n      [class.ant-patch-full-height]=\"nzDatePicker\">\n      <div class=\"ant-fullcalendar-header\" *ngIf=\"nzShowHeader\">\n        <nz-select\n          class=\"ant-fullcalendar-year-select\" style=\"width: 75px;\"\n          [ngModel]=\"_showYear\"\n          (ngModelChange)=\"_showYear = $event;_buildCalendar()\">\n          <nz-option\n            *ngFor=\"let year of _listOfYearName\"\n            [nzLabel]=\"year\"\n            [nzValue]=\"year\">\n          </nz-option>\n        </nz-select>\n        <nz-select\n          class=\"ant-fullcalendar-month-select\"\n          style=\"width: 70px;\"\n          *ngIf=\"nzMode == 'year'\"\n          [ngModel]=\"_showMonth\"\n          (ngModelChange)=\"_showMonth = $event;_buildCalendar()\">\n          <nz-option\n            *ngFor=\"let _month of _listOfMonthName;let i = index;\"\n            [nzLabel]=\"_month\"\n            [nzValue]=\"i\">\n          </nz-option>\n        </nz-select>\n        <nz-radio-group [(ngModel)]=\"nzMode\">\n          <label nz-radio-button [nzValue]=\"'year'\">\n            <span>{{_yearUnit}}</span>\n          </label><label nz-radio-button [nzValue]=\"'month'\">\n          <span>{{_monthUnit}}</span>\n        </label>\n        </nz-radio-group>\n      </div>\n      <div\n        [class.ant-fullcalendar-fullscreen]=\"nzFullScreen\"\n        [class.ant-fullcalendar]=\"!nzDatePicker\"\n        [class.ant-fullcalendar-full]=\"!nzDatePicker\"\n        [class.ant-patch-full-height]=\"nzDatePicker\">\n        <div\n          [class.ant-fullcalendar-calendar-body]=\"!nzDatePicker\"\n          [class.ant-calendar-body]=\"!nzDatePicker\"\n          [class.ant-patch-full-height]=\"nzDatePicker\">\n          <table\n            [class.ant-fullcalendar-table]=\"!nzDatePicker\"\n            [class.ant-calendar-table]=\"nzDatePicker\"\n            [class.ant-patch-full-height]=\"nzDatePicker\"\n            *ngIf=\"nzMode == 'year'\">\n            <thead>\n              <tr>\n                <th\n                  *ngFor=\"let _min of _listOfWeekName\"\n                  [class.ant-fullcalendar-column-header]=\"!nzDatePicker\"\n                  [class.ant-calendar-column-header]=\"nzDatePicker\">\n                  <span class=\"ant-fullcalendar-column-header-inner\">{{_min}}</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody\n              [class.ant-fullcalendartbody]=\"!nzDatePicker\"\n              [class.ant-calendartbody]=\"nzDatePicker\">\n              <tr *ngFor=\"let week of _weeksCalendar\">\n                <ng-template [ngIf]=\"!nzDatePicker\">\n                  <td\n                    [attr.title]=\"day.title\"\n                    *ngFor=\"let day of week.days\"\n                    [class.ant-fullcalendar-cell]=\"!nzDatePicker\"\n                    [class.ant-calendar-cell]=\"nzDatePicker\"\n                    [class.ant-fullcalendar-last-month-cell]=\"day.isLastMonth\"\n                    [class.ant-fullcalendar-next-month-btn-day]=\"day.isNextMonth\"\n                    [class.ant-fullcalendar-selected-day]=\"day.isSelectedDay\"\n                    [class.ant-fullcalendar-today]=\"day.isCurrentDay\">\n                    <div class=\"ant-fullcalendar-date\">\n                      <div class=\"ant-fullcalendar-value\" (click)=\"_clickDay($event,day)\">{{day.number}}</div>\n                      <div class=\"ant-fullcalendar-content\">\n                        <ng-template\n                          *ngIf=\"dateCell\"\n                          [ngTemplateOutlet]=\"dateCell\"\n                          [ngTemplateOutletContext]=\"{ $implicit: day}\">\n                        </ng-template>\n                      </div>\n                    </div>\n                  </td>\n                </ng-template>\n                <ng-template [ngIf]=\"nzDatePicker\">\n                  <td\n                    [attr.title]=\"day.title\"\n                    *ngFor=\"let day of week.days\"\n                    class=\"ant-calendar-cell\"\n                    [class.ant-calendar-disabled-cell-first-of-row]=\"day.firstDisabled\"\n                    [class.ant-calendar-disabled-cell-last-of-row]=\"day.lastDisabled\"\n                    [class.ant-calendar-disabled-cell]=\"day.disabled\"\n                    [class.ant-calendar-last-month-cell]=\"day.isLastMonth\"\n                    [class.ant-calendar-next-month-btn-day]=\"day.isNextMonth\"\n                    [class.ant-calendar-selected-day]=\"day.isSelectedDay\"\n                    [class.ant-calendar-today]=\"day.isCurrentDay\">\n                    <div class=\"ant-calendar-date\" (click)=\"_clickDay($event,day)\">{{day.number}}</div>\n                  </td>\n                </ng-template>\n              </tr>\n            </tbody>\n          </table>\n          <table\n            [class.ant-fullcalendar-month-panel-table]=\"!nzDatePicker\"\n            [class.ant-calendar-month-panel-table]=\"nzDatePicker\"\n            *ngIf=\"nzMode == 'month'\">\n            <tbody class=\"ant-fullcalendar-month-panel-tbody\">\n              <tr *ngFor=\"let quarter of _quartersCalendar\">\n                <ng-template [ngIf]=\"!nzDatePicker\">\n                  <td\n                    *ngFor=\"let month of quarter\"\n                    [attr.title]=\"month.name\"\n                    class=\"ant-fullcalendar-month-panel-cell\"\n                    [class.ant-fullcalendar-month-panel-selected-cell]=\"month.isSelectedMonth\"\n                    [class.ant-fullcalendar-month-panel-current-cell]=\"month.isCurrentMonth\">\n                    <div class=\"ant-fullcalendar-month\">\n                      <div class=\"ant-fullcalendar-value\" (click)=\"_clickMonth($event,month)\">{{month.name}}</div>\n                      <div class=\"ant-fullcalendar-content\">\n                        <ng-template\n                          *ngIf=\"monthCell\"\n                          [ngTemplateOutlet]=\"monthCell\"\n                          [ngTemplateOutletContext]=\"{ $implicit: month}\">\n                        </ng-template>\n                      </div>\n                    </div>\n                  </td>\n                </ng-template>\n                <ng-template [ngIf]=\"nzDatePicker\">\n                  <td\n                    *ngFor=\"let month of quarter\"\n                    [attr.title]=\"month.name\"\n                    class=\"ant-calendar-month-panel-cell\"\n                    [class.ant-calendar-month-panel-selected-cell]=\"month.isSelectedMonth\"\n                    [class.ant-calendar-month-panel-current-cell]=\"month.isCurrentMonth\">\n                    <div class=\"ant-calendar-month-panel-month\" (click)=\"_clickMonth($event,month)\">\n                      {{month.name}}\n                    </div>\n                  </td>\n                </ng-template>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-fullcalendar {\n  font-size: 12px;\n  line-height: 1.5;\n  outline: none;\n  border-top: 1px solid #d9d9d9;\n}\n.ant-fullcalendar-month-select {\n  margin-left: 5px;\n}\n.ant-fullcalendar-header {\n  padding: 11px 16px 11px 0;\n  text-align: right;\n}\n.ant-fullcalendar-header .ant-select-dropdown {\n  text-align: left;\n}\n.ant-fullcalendar-header .ant-radio-group {\n  margin-left: 8px;\n  text-align: left;\n}\n.ant-fullcalendar-header label.ant-radio-button {\n  height: 22px;\n  line-height: 20px;\n  padding: 0 10px;\n}\n.ant-fullcalendar-date-panel {\n  position: relative;\n  outline: none;\n}\n.ant-fullcalendar-calendar-body {\n  padding: 8px 8px 14px;\n}\n.ant-fullcalendar table {\n  border-collapse: collapse;\n  max-width: 100%;\n  background-color: transparent;\n  width: 100%;\n  height: 246px;\n}\n.ant-fullcalendar table,\n.ant-fullcalendar th,\n.ant-fullcalendar td {\n  border: 0;\n}\n.ant-fullcalendar td {\n  position: relative;\n}\n.ant-fullcalendar-calendar-table {\n  border-spacing: 0;\n  margin-bottom: 0;\n}\n.ant-fullcalendar-column-header {\n  line-height: 18px;\n  padding: 0;\n  width: 33px;\n  text-align: center;\n}\n.ant-fullcalendar-column-header .ant-fullcalendar-column-header-inner {\n  display: block;\n  font-weight: normal;\n}\n.ant-fullcalendar-week-number-header .ant-fullcalendar-column-header-inner {\n  display: none;\n}\n.ant-fullcalendar-month,\n.ant-fullcalendar-date {\n  text-align: center;\n  transition: all .3s;\n}\n.ant-fullcalendar-value {\n  display: block;\n  margin: 0 auto;\n  color: rgba(0, 0, 0, 0.65);\n  border-radius: 4px;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  background: transparent;\n  line-height: 22px;\n  transition: all .3s;\n}\n.ant-fullcalendar-value:hover {\n  background: #ecf6fd;\n  cursor: pointer;\n}\n.ant-fullcalendar-value:active {\n  background: #108ee9;\n  color: #fff;\n}\n.ant-fullcalendar-month-panel-cell .ant-fullcalendar-value {\n  width: 48px;\n}\n.ant-fullcalendar-today .ant-fullcalendar-value,\n.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value {\n  box-shadow: 0 0 0 1px #108ee9;\n}\n.ant-fullcalendar-selected-day .ant-fullcalendar-value,\n.ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {\n  background: #108ee9;\n  color: #fff;\n}\n.ant-fullcalendar-disabled-cell-first-of-row .ant-fullcalendar-value {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.ant-fullcalendar-disabled-cell-last-of-row .ant-fullcalendar-value {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.ant-fullcalendar-last-month-cell .ant-fullcalendar-value,\n.ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {\n  color: rgba(0, 0, 0, 0.25);\n}\n.ant-fullcalendar-month-panel-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: separate;\n}\n.ant-fullcalendar-content {\n  position: absolute;\n  width: 100%;\n  left: 0;\n  bottom: -9px;\n}\n.ant-fullcalendar-fullscreen {\n  border-top: 0;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-table {\n  table-layout: fixed;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-header .ant-radio-group {\n  margin-left: 16px;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-header label.ant-radio-button {\n  height: 28px;\n  line-height: 26px;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-date {\n  text-align: left;\n  margin: 0 4px;\n  display: block;\n  color: rgba(0, 0, 0, 0.65);\n  height: 116px;\n  padding: 4px 8px;\n  border-top: 2px solid #e9e9e9;\n  transition: background .3s;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover {\n  background: #ecf6fd;\n  cursor: pointer;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month:active,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-date:active {\n  background: #d2eafb;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-column-header {\n  text-align: right;\n  padding-right: 12px;\n  padding-bottom: 5px;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-value {\n  text-align: right;\n  background: transparent;\n  width: auto;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {\n  color: rgba(0, 0, 0, 0.65);\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date {\n  border-top-color: #108ee9;\n  background: transparent;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {\n  box-shadow: none;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date {\n  background: #ecf6fd;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value {\n  color: #108ee9;\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date,\n.ant-fullcalendar-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date {\n  color: rgba(0, 0, 0, 0.25);\n}\n.ant-fullcalendar-fullscreen .ant-fullcalendar-content {\n  height: 90px;\n  overflow-y: auto;\n  position: static;\n  width: auto;\n  left: auto;\n  bottom: auto;\n}\n.ant-fullcalendar-disabled-cell .ant-fullcalendar-date,\n.ant-fullcalendar-disabled-cell .ant-fullcalendar-date:hover {\n  cursor: not-allowed;\n}\n.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date,\n.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date:hover {\n  background: transparent;\n}\n.ant-fullcalendar-disabled-cell .ant-fullcalendar-value {\n  color: rgba(0, 0, 0, 0.25);\n  border-radius: 0;\n  width: auto;\n  cursor: not-allowed;\n}\n",
                    "nz-calendar {\n  display: block;\n  position: relative;\n}\n.ant-patch-full-height {\n  height: 100%;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzCalendarComponent.ctorParameters = function () { return [
    { type: ElementRef, },
]; };
NzCalendarComponent.propDecorators = {
    'dateCell': [{ type: ContentChild, args: ['dateCell',] },],
    'monthCell': [{ type: ContentChild, args: ['monthCell',] },],
    'nzClickDay': [{ type: Output },],
    'nzClickMonth': [{ type: Output },],
    'nzClearTime': [{ type: Input },],
    'nzDatePicker': [{ type: Input }, { type: HostBinding, args: ['class.ant-patch-full-height',] },],
    'nzMode': [{ type: Input },],
    'nzFullScreen': [{ type: Input },],
    'nzShowHeader': [{ type: Input },],
    'nzDisabledDate': [{ type: Input },],
    'nzValue': [{ type: Input },],
    'nzShowYear': [{ type: Input },],
    'nzShowMonth': [{ type: Input },],
    'nzLocale': [{ type: Input },],
};
