import { CdkPortalOutlet } from '@angular/cdk/portal';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, } from '@angular/core';
import { RCalendarComponent } from '../../extra/calendar';
import { RDateService, RCalendarTimeModelService, RCalendarSize } from '../../extra/calendar-kit';
import { RTimePickerComponent } from '../timepicker';
export class RCalendarWithTimeComponent extends RCalendarComponent {
    constructor(dateService, cd, calendarTimeModelService) {
        super();
        this.dateService = dateService;
        this.cd = cd;
        this.calendarTimeModelService = calendarTimeModelService;
    }
    ngOnInit() {
        if (!this.date) {
            this.date = this.calendarTimeModelService.getResetTime();
        }
    }
    ngAfterViewInit() {
        this.portalOutlet.attachTemplatePortal(this.timepicker.portal);
    }
    onDateValueChange(date) {
        const hours = this.dateService.getHours(this.date);
        const minutes = this.dateService.getMinutes(this.date);
        const seconds = this.dateService.getSeconds(this.date);
        const milliseconds = this.dateService.getMilliseconds(this.date);
        let newDate = this.dateService.setHours(date, hours);
        newDate = this.dateService.setMinutes(newDate, minutes);
        newDate = this.dateService.setMinutes(newDate, minutes);
        newDate = this.dateService.setSeconds(newDate, seconds);
        newDate = this.dateService.setMilliseconds(newDate, milliseconds);
        this.date = newDate;
    }
    onTimeChange(selectedTime) {
        let newDate = this.dateService.clone(this.date);
        newDate = this.dateService.setHours(newDate, this.dateService.getHours(selectedTime.time));
        newDate = this.dateService.setMinutes(newDate, this.dateService.getMinutes(selectedTime.time));
        newDate = this.dateService.setSeconds(newDate, this.dateService.getSeconds(selectedTime.time));
        newDate = this.dateService.setMilliseconds(newDate, this.dateService.getMilliseconds(selectedTime.time));
        this.date = newDate;
    }
    saveValue() {
        this.dateChange.emit(this.date);
    }
    saveCurrentTime() {
        this.dateChange.emit(this.dateService.today());
    }
    /**
     * We don't show seconds with twelve hours format
     * */
    showSeconds() {
        return this.withSeconds && !this.twelveHoursFormat;
    }
    isLarge() {
        return this.size === RCalendarSize.LARGE;
    }
}
RCalendarWithTimeComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-calendar-with-time',
                template: `
    <r-card class="calendar-with-time">
      <r-card-body class="picker-body">
        <r-base-calendar
          [boundingMonth]="boundingMonth"
          [startView]="startView"
          [date]="date"
          [min]="min"
          [max]="max"
          [filter]="filter"
          [dayCellComponent]="dayCellComponent"
          [monthCellComponent]="monthCellComponent"
          [yearCellComponent]="yearCellComponent"
          [size]="size"
          [visibleDate]="visibleDate"
          [showNavigation]="showNavigation"
          [showWeekNumber]="showWeekNumber"
          [weekNumberSymbol]="weekNumberSymbol"
          (dateChange)="onDateValueChange($event)">
        </r-base-calendar>
        <div class="timepicker-section"
             [class.size-large]="isLarge()"
             [class.timepicker-single-column-width]="singleColumn"
             [class.timepicker-multiple-column-width]="!singleColumn">
          <div class="picker-title">{{ title }}</div>
          <r-timepicker
            (onSelectTime)="onTimeChange($event)"
            [date]="date"
            [twelveHoursFormat]="twelveHoursFormat"
            [withSeconds]="showSeconds()"
            [showFooter]="false"
            [singleColumn]="singleColumn"
            [step]="step">
          </r-timepicker>
          <ng-container rPortalOutlet></ng-container>
        </div>
      </r-card-body>
      <r-card-footer class="picker-footer">
        <r-calendar-actions
          [applyButtonText]="applyButtonText"
          [currentTimeButtonText]="currentTimeButtonText"
          (setCurrentTime)="saveCurrentTime()"
          (saveValue)="saveValue()"
        ></r-calendar-actions>
      </r-card-footer>
    </r-card>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host ::ng-deep r-card.r-timepicker-container{flex:1 0 0;border-radius:0;width:auto;border-right:0;border-bottom:0}.picker-body{align-items:stretch;display:flex;padding:0}.picker-body r-base-calendar ::ng-deep r-card{border-radius:0}.calendar-with-time{overflow:hidden}.timepicker-section{display:flex;flex-direction:column}"]
            },] }
];
RCalendarWithTimeComponent.ctorParameters = () => [
    { type: RDateService },
    { type: ChangeDetectorRef },
    { type: RCalendarTimeModelService }
];
RCalendarWithTimeComponent.propDecorators = {
    visibleDate: [{ type: Input }],
    twelveHoursFormat: [{ type: Input }],
    withSeconds: [{ type: Input }],
    singleColumn: [{ type: Input }],
    step: [{ type: Input }],
    timeFormat: [{ type: Input }],
    title: [{ type: Input }],
    applyButtonText: [{ type: Input }],
    currentTimeButtonText: [{ type: Input }],
    portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet,] }],
    timepicker: [{ type: ViewChild, args: [RTimePickerComponent,] }]
};
//# sourceMappingURL=calendar-with-time.component.js.map