import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { DAYS_OF_WEEK } from '@aztrix/helpers';
import { getISODay } from 'date-fns';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/select";
import * as i5 from "@angular/material/core";
import * as i6 from "@angular/material/input";
import * as i7 from "@angular/material/slide-toggle";
import * as i8 from "@aztrix/components/button";
import * as i9 from "@aztrix/components/property-view";
import * as i10 from "./date-range-select/date-range-select.component";
import * as i11 from "./days-select/days-select.component";
import * as i12 from "./date-input/date-input.component";
import * as i13 from "@aztrix/translate";
export class DatesDaysSelectComponent {
    constructor() {
        this.dateRangeChange = new EventEmitter();
        this.days = DAYS_OF_WEEK.slice();
        this.daysChange = new EventEmitter();
        this.text = '';
        this.textChange = new EventEmitter();
        this.open = true;
        this.openChange = new EventEmitter();
        this.cancel = new EventEmitter();
        this.create = new EventEmitter();
        this.edit = new EventEmitter();
        this.delete = new EventEmitter();
        this.editMode = false;
        this.choice = 'specific';
        this.dateRangeGroup = new UntypedFormGroup({
            from: new UntypedFormControl(null, Validators.required),
            to: new UntypedFormControl(null, Validators.required),
        });
        this.dateControl = new UntypedFormControl(null, Validators.required);
        this.today = new Date();
        this.textForm = new UntypedFormControl('');
        this.openControl = new UntypedFormControl({ value: true });
        this.subscriptions = new Subscription();
    }
    ngOnInit() {
        this.subscriptions.add(this.dateControl.valueChanges.subscribe((value) => {
            this.dateRange = [value];
            this.dateRangeChange.emit(this.dateRange);
            const index = getISODay(value);
            this.days = [DAYS_OF_WEEK[index - 1]];
            this.daysChange.emit(this.days);
        }));
        this.subscriptions.add(this.dateRangeGroup.valueChanges.subscribe(({ from, to }) => {
            this.dateRange = [from, to];
            this.dateRangeChange.emit(this.dateRange);
        }));
        this.subscriptions.add(this.textForm.valueChanges.subscribe((text) => {
            this.text = text;
            this.textChange.emit(this.text);
        }));
        this.subscriptions.add(this.openControl.valueChanges.subscribe((open) => {
            this.open = open;
            this.openChange.emit(this.open);
        }));
    }
    ngOnChanges(changes) {
        if (changes.dateRange && this.dateRange) {
            if (this.dateRange.length === 1) {
                this.choice = 'specific';
                this.dateControl.setValue(this.dateRange[0], { emitEvent: false });
                const index = getISODay(this.dateRange[0]);
                this.days = [DAYS_OF_WEEK[index - 1]];
            }
            else {
                this.choice = 'range';
                this.dateRangeGroup.setValue({ from: this.dateRange[0], to: this.dateRange[1] }, { emitEvent: false });
            }
        }
        if (changes.text && this.text) {
            this.textForm.setValue(this.text, { emitEvent: false });
        }
        if (changes.open) {
            this.openControl.setValue(this.open, { emitEvent: false });
        }
    }
    ngOnDestroy() {
        this.subscriptions.unsubscribe();
    }
    _create() {
        if (this.invalid) {
            this.markAllTouched();
        }
        else {
            this.create.emit();
        }
    }
    _edit() {
        if (this.invalid) {
            this.markAllTouched();
        }
        else {
            this.edit.emit();
        }
    }
    get invalid() {
        if (this.choice === 'range') {
            return this.dateRangeGroup.invalid;
        }
        else {
            return this.dateControl.invalid;
        }
    }
    markAllTouched() {
        this.dateRangeGroup.markAllAsTouched();
        this.dateControl.markAllAsTouched();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatesDaysSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatesDaysSelectComponent, selector: "ax-dates-days-select", inputs: { dateRange: "dateRange", days: "days", text: "text", open: "open" }, outputs: { dateRangeChange: "dateRangeChange", daysChange: "daysChange", textChange: "textChange", openChange: "openChange", cancel: "cancel", create: "create", edit: "edit", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"c-input\" appearance=\"outline\">\n  <mat-select [(ngModel)]=\"choice\">\n    <mat-option value=\"specific\">{{ 'opening-hours.specific-date' | translate }}</mat-option>\n    <mat-option value=\"range\">{{ 'opening-hours.date-range' | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-slide-toggle class=\"check\" name=\"openOrClosed\" [formControl]=\"openControl\">\n  {{\n    openControl.value\n      ? ('label.open' | translate | uppercase)\n      : ('label.closed' | translate | uppercase)\n  }}</mat-slide-toggle\n>\n\n<ng-container [ngSwitch]=\"choice\">\n  <ng-container *ngSwitchDefault>\n    <ax-date-input\n      [label]=\"'opening-hours.specific-date' | translate\"\n      [control]=\"dateControl\"\n      [min]=\"today\"\n    ></ax-date-input>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'range'\">\n    <ax-date-range-select [group]=\"dateRangeGroup\"></ax-date-range-select>\n    <ax-days-select [(days)]=\"days\" (daysChange)=\"daysChange.emit($event)\"></ax-days-select>\n  </ng-container>\n</ng-container>\n\n<mat-form-field class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'opening-hours.special.label' | translate }}</mat-label>\n  <input matInput autocomplete=\"off\" [formControl]=\"textForm\" />\n  <mat-hint align=\"end\">{{ 'opening-hours.special.hint' | translate }}</mat-hint>\n</mat-form-field>\n\n<ax-opening-hours-date-view\n  [dates]=\"dateRange\"\n  [text]=\"textForm.value\"\n></ax-opening-hours-date-view>\n<ax-opening-hours-day-view *ngIf=\"choice === 'range'\" [days]=\"days\"></ax-opening-hours-day-view>\n\n<div class=\"h-button-wrapper\">\n  <button axButton type=\"button\" (click)=\"cancel.emit()\">\n    {{ 'label.cancel' | translate }}\n  </button>\n  <button *ngIf=\"!editMode\" axButton type=\"button\" filled color=\"primary\" (click)=\"_create()\">\n    {{ 'label.create' | translate }}\n  </button>\n  <button *ngIf=\"editMode\" axButton type=\"button\" filled color=\"danger\" (click)=\"delete.emit()\">\n    {{ 'label.delete' | translate }}\n  </button>\n  <button *ngIf=\"editMode\" axButton type=\"button\" filled color=\"primary\" (click)=\"_edit()\">\n    {{ 'label.save' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:.5rem}@media only screen and (min-width: 600px){:host{padding:1rem}}:host .mat-slide-toggle{margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i9.OpeningHoursDateViewComponent, selector: "ax-opening-hours-date-view", inputs: ["dates", "text"] }, { kind: "component", type: i9.OpeningHoursDayViewComponent, selector: "ax-opening-hours-day-view", inputs: ["days"] }, { kind: "component", type: i10.DateRangeSelectComponent, selector: "ax-date-range-select", inputs: ["group"] }, { kind: "component", type: i11.DaysSelectComponent, selector: "ax-days-select", inputs: ["days"], outputs: ["daysChange"] }, { kind: "component", type: i12.DateInputComponent, selector: "ax-date-input", inputs: ["control", "label", "min", "max"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatesDaysSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-dates-days-select', template: "<mat-form-field class=\"c-input\" appearance=\"outline\">\n  <mat-select [(ngModel)]=\"choice\">\n    <mat-option value=\"specific\">{{ 'opening-hours.specific-date' | translate }}</mat-option>\n    <mat-option value=\"range\">{{ 'opening-hours.date-range' | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-slide-toggle class=\"check\" name=\"openOrClosed\" [formControl]=\"openControl\">\n  {{\n    openControl.value\n      ? ('label.open' | translate | uppercase)\n      : ('label.closed' | translate | uppercase)\n  }}</mat-slide-toggle\n>\n\n<ng-container [ngSwitch]=\"choice\">\n  <ng-container *ngSwitchDefault>\n    <ax-date-input\n      [label]=\"'opening-hours.specific-date' | translate\"\n      [control]=\"dateControl\"\n      [min]=\"today\"\n    ></ax-date-input>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'range'\">\n    <ax-date-range-select [group]=\"dateRangeGroup\"></ax-date-range-select>\n    <ax-days-select [(days)]=\"days\" (daysChange)=\"daysChange.emit($event)\"></ax-days-select>\n  </ng-container>\n</ng-container>\n\n<mat-form-field class=\"c-input\" appearance=\"outline\">\n  <mat-label>{{ 'opening-hours.special.label' | translate }}</mat-label>\n  <input matInput autocomplete=\"off\" [formControl]=\"textForm\" />\n  <mat-hint align=\"end\">{{ 'opening-hours.special.hint' | translate }}</mat-hint>\n</mat-form-field>\n\n<ax-opening-hours-date-view\n  [dates]=\"dateRange\"\n  [text]=\"textForm.value\"\n></ax-opening-hours-date-view>\n<ax-opening-hours-day-view *ngIf=\"choice === 'range'\" [days]=\"days\"></ax-opening-hours-day-view>\n\n<div class=\"h-button-wrapper\">\n  <button axButton type=\"button\" (click)=\"cancel.emit()\">\n    {{ 'label.cancel' | translate }}\n  </button>\n  <button *ngIf=\"!editMode\" axButton type=\"button\" filled color=\"primary\" (click)=\"_create()\">\n    {{ 'label.create' | translate }}\n  </button>\n  <button *ngIf=\"editMode\" axButton type=\"button\" filled color=\"danger\" (click)=\"delete.emit()\">\n    {{ 'label.delete' | translate }}\n  </button>\n  <button *ngIf=\"editMode\" axButton type=\"button\" filled color=\"primary\" (click)=\"_edit()\">\n    {{ 'label.save' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:.5rem}@media only screen and (min-width: 600px){:host{padding:1rem}}:host .mat-slide-toggle{margin-bottom:.5rem}\n"] }]
        }], propDecorators: { dateRange: [{
                type: Input
            }], dateRangeChange: [{
                type: Output
            }], days: [{
                type: Input
            }], daysChange: [{
                type: Output
            }], text: [{
                type: Input
            }], textChange: [{
                type: Output
            }], open: [{
                type: Input
            }], openChange: [{
                type: Output
            }], cancel: [{
                type: Output
            }], create: [{
                type: Output
            }], edit: [{
                type: Output
            }], delete: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 