import { Component, EventEmitter, Input, Output } from '@angular/core';
import moment from 'moment/moment';
import { DEFAULT_TIME } from '../../../constants/time.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../../../ui-kit/popover/popover.component";
import * as i4 from "../../../ui-kit/popover/popover.directive";
import * as i5 from "../../../ui-kit/time-picker/time-picker/time-picker.component";
export class FrequencyDialogTopComponent {
    constructor() {
        this.occurrenceFirst = 0;
        this.id = 0; // 0 = Daily, 1: weekly, 5: Annually
        this.inputTime = '11:00 pm';
        this.frequencyType = 0; // 0 = days, 1 = weeks & 2 = years
        this.yearlyDay = new Date().getDate();
        this.valueChangedFirst = new EventEmitter();
        this.nextDisable = new EventEmitter();
        this.timeChanged = new EventEmitter();
        this.yearlyDateChanged = new EventEmitter();
        this.todayDate = new Date();
        this.dateObjectData = new Date();
        this.timeData = '11:00 pm';
        this.DEFAULT_TIME = DEFAULT_TIME;
    }
    ngOnInit() { }
    enterValueFirst(event, actionType) {
        if (this.id !== 0 && this.id !== 1 && this.id !== 5) {
            this.enterValue(this.occurrenceFirst, actionType);
            return;
        }
        if (!Number.isNaN(Number(this.occurrenceFirst)) &&
            this.occurrenceFirst !== 0 &&
            Number(this.occurrenceFirst) > 0) {
            this.occurrenceFirst = Number(this.occurrenceFirst);
            this.valueChangedFirst.emit({
                type: actionType,
                value: Number(this.occurrenceFirst),
                pageName: '',
            });
        }
        else {
            this.occurrenceFirst = 1;
        }
    }
    enterValue(event, actionType) {
        if (!Number.isNaN(Number(event)) &&
            event !== 0 &&
            Number(event) > 0 &&
            Number(event) < 32) {
            this.occurrenceFirst = Number(event);
            this.valueChangedFirst.emit({
                type: actionType,
                value: Number(event),
                pageName: '',
            });
        }
        else {
            this.occurrenceFirst = new Date().getDate();
        }
    }
    getToday() {
        return moment(Date.now()).format('YYYY-MM-DD HH:mm:ss')?.split(' ')[0];
    }
    onTimeChanged(event) {
        try {
            event = event.selectedValue;
            this.timeData = event;
            if (typeof this.dateObjectData == 'object') {
                this.dateObjectData = moment(this.dateObjectData)?.toDate();
            }
            let timeStamp = moment(this.dateObjectData.getDate() +
                '-' +
                (this.dateObjectData.getMonth() + 1) +
                '-' +
                this.dateObjectData.getFullYear() +
                ' ' +
                this.timeData, 'DD-MM-YYYY hh:mm a').unix();
            if (Date.now() / 1000 > timeStamp) {
                this.nextDisable.emit(true);
            }
            else {
                this.nextDisable.emit(false);
            }
            this.timeChanged.emit(event);
        }
        catch (e) {
            console.error(e);
        }
    }
    enterYearDay(event) {
        if (!Number.isNaN(Number(this.yearlyDay)) &&
            this.yearlyDay !== 0 &&
            Number(this.yearlyDay) > 0 &&
            Number(this.yearlyDay) < 32) {
            //this.yearlyDay = Number(event.target.value);
            this.yearlyDateChanged.emit(this.yearlyDay);
        }
        else {
            this.yearlyDay = new Date().getDate();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyDialogTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyDialogTopComponent, selector: "app-frequency-dialog-top", inputs: { occurrenceFirst: "occurrenceFirst", id: "id", inputTime: "inputTime", frequencyType: "frequencyType", yearlyDay: "yearlyDay" }, outputs: { valueChangedFirst: "valueChangedFirst", nextDisable: "nextDisable", timeChanged: "timeChanged", yearlyDateChanged: "yearlyDateChanged" }, ngImport: i0, template: "<div class=\"frequency-dialog-top vx-p-3 vx-d-flex vx-align-center\">\n  <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">\n    {{ id === 0 || id === 1 || id === 5 ? \"Every\" : \"Day\" }}\n  </div>\n  <input\n    type=\"number\"\n    [id]=\"'occurrence' + id\"\n    [(ngModel)]=\"occurrenceFirst\"\n    class=\"day-counter\"\n    onkeydown=\"return event.keyCode !== 190\"\n    min=\"0\"\n    oninput=\"this.value = Math.abs(this.value)\"\n    (focusout)=\"enterValueFirst($event, 'occurrenceFirst')\"\n  />\n  <div\n    *ngIf=\"frequencyType === 1\"\n    class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\"\n  >\n    {{ occurrenceFirst > 1 ? \"weeks\" : \"week\" }} by\n  </div>\n  <div\n    class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\"\n    *ngIf=\"id !== 0 && id !== 1 && id !== 5\"\n  >\n    by\n  </div>\n  <ng-container *ngIf=\"frequencyType === 2\">\n    <div class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\">\n      {{ occurrenceFirst > 1 ? \"years\" : \"year\" }} on day\n    </div>\n    <input\n      type=\"number\"\n      type=\"number\"\n      [id]=\"'occurrence-day' + id\"\n      [(ngModel)]=\"yearlyDay\"\n      (focusout)=\"enterYearDay($event)\"\n      onkeydown=\"return event.keyCode !== 190\"\n      min=\"0\"\n      oninput=\"this.value = Math.abs(this.value)\"\n    />\n    <div class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\">by</div>\n  </ng-container>\n  <div\n    class=\"time-picker vx-d-flex vx-align-center vx-justify-end vx-pr-3\"\n    appPopover\n    (click)=\"timePicker.popover()\"\n    placement=\"right\"\n  >\n    <input\n      type=\"text\"\n      [id]=\"'time-picker-input-top' + id\"\n      [(ngModel)]=\"inputTime\"\n      readonly\n      [placeholder]=\"DEFAULT_TIME\"\n    />\n    <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n      <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n    </div>\n  </div>\n  <app-popover #timePicker [dontCloseonClick]=\"true\">\n    <app-time-picker\n      [time]=\"inputTime\"\n      (onTimeSelection)=\"onTimeChanged($event); timePicker.closePopover('top')\"\n    ></app-time-picker>\n  </app-popover>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog-top input[type=number]{background:transparent;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;font-size:13px;height:1.5rem;width:3rem;text-align:center;outline:none}::ng-deep .frequency-dialog-top input[type=number]::-webkit-outer-spin-button,::ng-deep .frequency-dialog-top input[type=number]::-webkit-inner-spin-button{-moz-appearance:none;-webkit-appearance:none;margin:0}::ng-deep .frequency-dialog-top .time-picker{border-radius:.25rem;border:1px solid #dbdbdb;height:2rem;width:6.25rem;position:relative}::ng-deep .frequency-dialog-top .time-picker input{background:transparent;border-radius:0;border:none;color:#161b2f;font-size:13px;margin:0!important;padding:0 0 0 .75rem;position:absolute;top:0;left:0;height:100%;width:100%;cursor:pointer}::ng-deep .frequency-dialog-top .time-picker input::placeholder{color:#161b2f}::ng-deep .frequency-dialog-top .time-picker input:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyDialogTopComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-frequency-dialog-top', template: "<div class=\"frequency-dialog-top vx-p-3 vx-d-flex vx-align-center\">\n  <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">\n    {{ id === 0 || id === 1 || id === 5 ? \"Every\" : \"Day\" }}\n  </div>\n  <input\n    type=\"number\"\n    [id]=\"'occurrence' + id\"\n    [(ngModel)]=\"occurrenceFirst\"\n    class=\"day-counter\"\n    onkeydown=\"return event.keyCode !== 190\"\n    min=\"0\"\n    oninput=\"this.value = Math.abs(this.value)\"\n    (focusout)=\"enterValueFirst($event, 'occurrenceFirst')\"\n  />\n  <div\n    *ngIf=\"frequencyType === 1\"\n    class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\"\n  >\n    {{ occurrenceFirst > 1 ? \"weeks\" : \"week\" }} by\n  </div>\n  <div\n    class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\"\n    *ngIf=\"id !== 0 && id !== 1 && id !== 5\"\n  >\n    by\n  </div>\n  <ng-container *ngIf=\"frequencyType === 2\">\n    <div class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\">\n      {{ occurrenceFirst > 1 ? \"years\" : \"year\" }} on day\n    </div>\n    <input\n      type=\"number\"\n      type=\"number\"\n      [id]=\"'occurrence-day' + id\"\n      [(ngModel)]=\"yearlyDay\"\n      (focusout)=\"enterYearDay($event)\"\n      onkeydown=\"return event.keyCode !== 190\"\n      min=\"0\"\n      oninput=\"this.value = Math.abs(this.value)\"\n    />\n    <div class=\"vx-fs-13 vx-paragraph-txt vx-ml-3 vx-mr-3\">by</div>\n  </ng-container>\n  <div\n    class=\"time-picker vx-d-flex vx-align-center vx-justify-end vx-pr-3\"\n    appPopover\n    (click)=\"timePicker.popover()\"\n    placement=\"right\"\n  >\n    <input\n      type=\"text\"\n      [id]=\"'time-picker-input-top' + id\"\n      [(ngModel)]=\"inputTime\"\n      readonly\n      [placeholder]=\"DEFAULT_TIME\"\n    />\n    <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n      <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n    </div>\n  </div>\n  <app-popover #timePicker [dontCloseonClick]=\"true\">\n    <app-time-picker\n      [time]=\"inputTime\"\n      (onTimeSelection)=\"onTimeChanged($event); timePicker.closePopover('top')\"\n    ></app-time-picker>\n  </app-popover>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog-top input[type=number]{background:transparent;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;font-size:13px;height:1.5rem;width:3rem;text-align:center;outline:none}::ng-deep .frequency-dialog-top input[type=number]::-webkit-outer-spin-button,::ng-deep .frequency-dialog-top input[type=number]::-webkit-inner-spin-button{-moz-appearance:none;-webkit-appearance:none;margin:0}::ng-deep .frequency-dialog-top .time-picker{border-radius:.25rem;border:1px solid #dbdbdb;height:2rem;width:6.25rem;position:relative}::ng-deep .frequency-dialog-top .time-picker input{background:transparent;border-radius:0;border:none;color:#161b2f;font-size:13px;margin:0!important;padding:0 0 0 .75rem;position:absolute;top:0;left:0;height:100%;width:100%;cursor:pointer}::ng-deep .frequency-dialog-top .time-picker input::placeholder{color:#161b2f}::ng-deep .frequency-dialog-top .time-picker input:focus{outline:none}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { occurrenceFirst: [{
                type: Input
            }], id: [{
                type: Input
            }], inputTime: [{
                type: Input
            }], frequencyType: [{
                type: Input
            }], yearlyDay: [{
                type: Input
            }], valueChangedFirst: [{
                type: Output
            }], nextDisable: [{
                type: Output
            }], timeChanged: [{
                type: Output
            }], yearlyDateChanged: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 