import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, } from '@angular/core';
import { createRangeForm } from '@aztrix/helpers';
import { FormGroup } from '@ngneat/reactive-forms';
import { MediaQuery, ObserveResizeService } from 'angular-container-media-query';
import { isValid } from 'date-fns';
import { of, ReplaySubject, Subscription } from 'rxjs';
import { map, shareReplay, startWith, switchMap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "angular-container-media-query";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/slide-toggle";
import * as i5 from "@aztrix/icons";
import * as i6 from "@aztrix/components/button";
import * as i7 from "@aztrix/components/property-view";
import * as i8 from "../time-range-edit/time-range-edit.component";
import * as i9 from "@aztrix/helpers";
import * as i10 from "@aztrix/translate";
export class DayEditComponent {
    constructor(_resize, _elementRef, _changeDetector) {
        this._resize = _resize;
        this._elementRef = _elementRef;
        this._changeDetector = _changeDetector;
        this.cleared = false;
        this.readonly = false;
        this.add = new EventEmitter();
        this.remove = new EventEmitter();
        this.small = false;
        this.medium = false;
        this.large = false;
        this.subscription = new Subscription();
        this._group$ = new ReplaySubject(1);
        this.open$ = this._group$.pipe(map((group) => group.get('open')), switchMap((control) => {
            if (control) {
                return control.valueChanges.pipe(startWith(control.value));
            }
            else {
                return of(false);
            }
        }), shareReplay(1));
    }
    ngOnChanges(changes) {
        if (changes.group && this.group) {
            this._group$.next(this.group);
            this.subscription.unsubscribe();
            this.subscription = this.open$.subscribe((open) => {
                if (open) {
                    if (this.rangeControls.length <= 0) {
                        this.ranges.push(createRangeForm());
                    }
                    else if (this.rangeControls.length === 1) {
                        const fromControl = this.rangeControls[0].get('from');
                        const toControl = this.rangeControls[0].get('to');
                        if (fromControl?.value === null && toControl?.value === null) {
                            fromControl.setValue(new Date(1970, 0, 1, 9), { emitEvent: false });
                            toControl.setValue(new Date(1970, 0, 1, 17), { emitEvent: false });
                        }
                    }
                }
                else {
                    this.group.markAsUntouched();
                }
            });
        }
    }
    ngAfterViewInit() {
        this._resize.register(this, this._elementRef, this._changeDetector);
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    removeable() {
        const range = this.rangeControls[0].value;
        return isValid(range.from) || isValid(range.to) || this.rangeControls.length > 1;
    }
    get days() {
        const day = this.group.get('day')?.value;
        const days = this.group.get('days')?.value;
        return day ? [day] : days || [];
    }
    get ranges() {
        return this.group?.get('ranges');
    }
    get rangeControls() {
        return this.ranges.controls;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DayEditComponent, deps: [{ token: i1.ObserveResizeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DayEditComponent, selector: "ax-day-edit", inputs: { group: "group", name: "name", cleared: "cleared", readonly: "readonly" }, outputs: { add: "add", remove: "remove" }, host: { properties: { "class.small": "this.small", "class.medium": "this.medium", "class.large": "this.large" } }, usesOnChanges: true, ngImport: i0, template: "<ax-opening-hours-day-view class=\"label\" [days]=\"days\"></ax-opening-hours-day-view>\n<ng-container [formGroup]=\"group\">\n  <mat-slide-toggle\n    class=\"check\"\n    [ngClass]=\"{readonly: readonly}\"\n    formControlName=\"open\"\n  ></mat-slide-toggle>\n</ng-container>\n\n<ng-container *ngIf=\"open$ | async\">\n  <div class=\"ranges\">\n    <div class=\"range\" *ngFor=\"let range of rangeControls; let index = index\">\n      <ax-time-range-edit\n        [name]=\"name + ' time-range' + index\"\n        [group]=\"range\"\n        [readonly]=\"readonly\"\n      ></ax-time-range-edit>\n      <button\n        axButton\n        type=\"button\"\n        icon-button\n        *ngIf=\"removeable() && !group.disabled && !readonly\"\n        (click)=\"remove.next({group: group, range: range})\"\n      >\n        <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n      </button>\n      <div class=\"errors\" *ngIf=\"range?.get('from')?.touched && range?.get('to')?.touched\">\n        <div class=\"c-property-edit__error\" *ngFor=\"let error of range.errors | keyvalue\">\n          <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n          <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"errors\">\n      <div class=\"c-property-edit__error\" *ngFor=\"let error of ranges?.errors | keyvalue\">\n        <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n        <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"(open$ | async) === false || (open$ | async) === null\">\n  <span *ngIf=\"cleared\" class=\"closed\"> {{ 'property.value.empty' | translate }}</span>\n  <span *ngIf=\"!cleared\" class=\"closed\">{{ 'label.closed' | translate | uppercase }}</span>\n</ng-container>\n\n<button\n  class=\"add\"\n  *ngIf=\"(open$ | async) === true && !group.disabled; else dummy\"\n  axButton\n  type=\"button\"\n  icon-button\n  color=\"primary\"\n  [disabled]=\"readonly\"\n  outline\n  (click)=\"add.next(group)\"\n>\n  <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n</button>\n\n<ng-template #dummy>\n  <p *ngIf=\"medium\">&nbsp;</p>\n</ng-template>\n", styles: [":host{display:grid;grid-template-areas:\"check label label\" \"ranges ranges ranges\" \"button button button\";grid-template-columns:36px 1fr 1fr;grid-gap:1rem;grid-row-gap:.5rem;align-items:center;justify-content:flex-start;justify-items:flex-start;margin:.5rem 0 1.75rem;min-height:64px}:host.small .range{display:grid;align-items:center;grid-template-columns:auto auto}:host.small .range .ax-button{margin-left:.75rem}:host.medium{grid-template-areas:\"check label label\" \"ranges ranges button\";grid-template-columns:36px max-content max-content}:host:not(.large) .ranges{grid-area:ranges}:host:not(.large) .label{grid-area:label}:host:not(.large) .check{grid-area:check}:host:not(.large) .closed{grid-area:ranges}:host:not(.large) .add{grid-area:button}:host.large{display:contents}:host.large .label{margin:1.25rem 0 auto}:host.large .closed{margin:auto .5rem}:host:last-child{margin:.2rem 0 0}:host .check.readonly{pointer-events:none}:host .check.readonly ::ng-deep .mdc-switch__handle{pointer-events:none}.add{margin:auto 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.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: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i7.OpeningHoursDayViewComponent, selector: "ax-opening-hours-day-view", inputs: ["days"] }, { kind: "component", type: i8.TimeRangeEditComponent, selector: "ax-time-range-edit", inputs: ["group", "name", "readonly"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i9.ErrorTranslationKeyPipe, name: "errorTranslationKey" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] }); }
}
__decorate([
    MediaQuery('ax-day-range-edit:(min-width: 26.25em)'),
    __metadata("design:type", Object)
], DayEditComponent.prototype, "small", void 0);
__decorate([
    MediaQuery('ax-day-range-edit:(min-width: 29.375em)'),
    __metadata("design:type", Object)
], DayEditComponent.prototype, "medium", void 0);
__decorate([
    MediaQuery('ax-day-range-edit:(min-width: 39.375em)'),
    __metadata("design:type", Object)
], DayEditComponent.prototype, "large", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DayEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-day-edit', template: "<ax-opening-hours-day-view class=\"label\" [days]=\"days\"></ax-opening-hours-day-view>\n<ng-container [formGroup]=\"group\">\n  <mat-slide-toggle\n    class=\"check\"\n    [ngClass]=\"{readonly: readonly}\"\n    formControlName=\"open\"\n  ></mat-slide-toggle>\n</ng-container>\n\n<ng-container *ngIf=\"open$ | async\">\n  <div class=\"ranges\">\n    <div class=\"range\" *ngFor=\"let range of rangeControls; let index = index\">\n      <ax-time-range-edit\n        [name]=\"name + ' time-range' + index\"\n        [group]=\"range\"\n        [readonly]=\"readonly\"\n      ></ax-time-range-edit>\n      <button\n        axButton\n        type=\"button\"\n        icon-button\n        *ngIf=\"removeable() && !group.disabled && !readonly\"\n        (click)=\"remove.next({group: group, range: range})\"\n      >\n        <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n      </button>\n      <div class=\"errors\" *ngIf=\"range?.get('from')?.touched && range?.get('to')?.touched\">\n        <div class=\"c-property-edit__error\" *ngFor=\"let error of range.errors | keyvalue\">\n          <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n          <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"errors\">\n      <div class=\"c-property-edit__error\" *ngFor=\"let error of ranges?.errors | keyvalue\">\n        <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n        <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"(open$ | async) === false || (open$ | async) === null\">\n  <span *ngIf=\"cleared\" class=\"closed\"> {{ 'property.value.empty' | translate }}</span>\n  <span *ngIf=\"!cleared\" class=\"closed\">{{ 'label.closed' | translate | uppercase }}</span>\n</ng-container>\n\n<button\n  class=\"add\"\n  *ngIf=\"(open$ | async) === true && !group.disabled; else dummy\"\n  axButton\n  type=\"button\"\n  icon-button\n  color=\"primary\"\n  [disabled]=\"readonly\"\n  outline\n  (click)=\"add.next(group)\"\n>\n  <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n</button>\n\n<ng-template #dummy>\n  <p *ngIf=\"medium\">&nbsp;</p>\n</ng-template>\n", styles: [":host{display:grid;grid-template-areas:\"check label label\" \"ranges ranges ranges\" \"button button button\";grid-template-columns:36px 1fr 1fr;grid-gap:1rem;grid-row-gap:.5rem;align-items:center;justify-content:flex-start;justify-items:flex-start;margin:.5rem 0 1.75rem;min-height:64px}:host.small .range{display:grid;align-items:center;grid-template-columns:auto auto}:host.small .range .ax-button{margin-left:.75rem}:host.medium{grid-template-areas:\"check label label\" \"ranges ranges button\";grid-template-columns:36px max-content max-content}:host:not(.large) .ranges{grid-area:ranges}:host:not(.large) .label{grid-area:label}:host:not(.large) .check{grid-area:check}:host:not(.large) .closed{grid-area:ranges}:host:not(.large) .add{grid-area:button}:host.large{display:contents}:host.large .label{margin:1.25rem 0 auto}:host.large .closed{margin:auto .5rem}:host:last-child{margin:.2rem 0 0}:host .check.readonly{pointer-events:none}:host .check.readonly ::ng-deep .mdc-switch__handle{pointer-events:none}.add{margin:auto 0}\n"] }]
        }], ctorParameters: () => [{ type: i1.ObserveResizeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { group: [{
                type: Input
            }], name: [{
                type: Input
            }], cleared: [{
                type: Input
            }], readonly: [{
                type: Input
            }], add: [{
                type: Output
            }], remove: [{
                type: Output
            }], small: [{
                type: HostBinding,
                args: ['class.small']
            }], medium: [{
                type: HostBinding,
                args: ['class.medium']
            }], large: [{
                type: HostBinding,
                args: ['class.large']
            }] } });
//# sourceMappingURL=data:application/json;base64, 