import { Component, Input, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import { getFilterExpression, getFormattedDate, createFilter, combineFilters } from '../../../_helpers/filter-utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/form-field";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/datepicker";
import * as i5 from "@angular/material/button";
export class DashboardFilterComponent {
    constructor() {
        this.filterChangeSubject = new Subject();
        this.filterChangeSubject.pipe(debounceTime(500)).subscribe(val => this.fireFilterChange(val));
    }
    ngOnInit() {
        if (this.filtersFormGroup$ != null) {
            this.filtersFormGroup$.addControl('start', new FormControl(null));
            this.filtersFormGroup$.addControl('end', new FormControl(null));
        }
    }
    clearFilters() {
        this.filtersFormGroup$.reset();
        // @ts-ignore - second parameter “payload” for publish method should be optional
        PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
    }
    updateTmpData(filterData) {
        this.filterChangeSubject.next(filterData);
    }
    dateRangeChangeHandler(field) {
        const { filterId, name } = field;
        const start = this.filtersFormGroup$.get('start').value;
        const end = this.filtersFormGroup$.get('end').value;
        if (start && end) {
            let startDate = getFormattedDate(start);
            let endDate = getFormattedDate(end);
            if (startDate && endDate) {
                startDate = `${startDate}T00:00:00`;
                endDate = `${endDate}T00:00:00`;
                const startFilter = createFilter(startDate, name, 'GT');
                const endFilter = createFilter(endDate, name, 'LT');
                const filterData = {
                    filterId,
                    filterExpression: combineFilters([startFilter, endFilter], null)
                };
                PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
            }
        }
    }
    fireFilterChange(data) {
        const { event, field } = data;
        const filterData = {
            filterId: field.filterId,
            filterExpression: getFilterExpression(event.target.value, field.name, field.metadata)
        };
        PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardFilterComponent, isStandalone: true, selector: "app-dashboard-filter", inputs: { pConn$: "pConn$", filtersFormGroup$: "filtersFormGroup$", inlineProps: "inlineProps", children: "children" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'psdk-block-style': inlineProps.filterPosition === 'block-start'\n  }\"\n>\n  <div *ngFor=\"let kid of children\">\n    <div *ngIf=\"kid.type === 'DateTime'\" [formGroup]=\"filtersFormGroup$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-label>{{ kid.label }}</mat-label>\n        <mat-date-range-input [rangePicker]=\"picker\">\n          <input matStartDate placeholder=\"Start date\" formControlName=\"start\" />\n          <input matEndDate placeholder=\"End date\" formControlName=\"end\" (dateChange)=\"dateRangeChangeHandler(kid)\" />\n        </mat-date-range-input>\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"kid.c11nEnv\">\n      <span (input)=\"updateTmpData({ event: $event, field: kid })\">\n        <component-mapper\n          [name]=\"kid.c11nEnv.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.c11nEnv.getPConnect(),\n            formGroup$: filtersFormGroup$\n          }\"\n          errorMsg=\"Dashboard filter wants component not yet available: {{ kid.c11nEnv.getPConnect().getComponentName() }}\"\n        >\n        </component-mapper>\n      </span>\n    </div>\n  </div>\n  <div>\n    <button mat-button color=\"primary\" (click)=\"clearFilters()\">Clear All</button>\n  </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.psdk-block-style{display:grid;direction:column-reverse;gap:1rem;grid-template-columns:repeat(7,1fr)}::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatFormFieldModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2.MatFormField; }), selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i2.MatSuffix; }), selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.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: i0.forwardRef(function () { return i3.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i3.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDatepickerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4.MatDatepickerToggle; }), selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i0.forwardRef(function () { return i4.MatDateRangeInput; }), selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.MatStartDate; }), selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.MatEndDate; }), selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i0.forwardRef(function () { return i4.MatDateRangePicker; }), selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatButtonModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i5.MatButton; }), selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatNativeDateModule; }) }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-dashboard-filter', standalone: true, imports: [
                        CommonModule,
                        MatFormFieldModule,
                        ReactiveFormsModule,
                        MatDatepickerModule,
                        MatButtonModule,
                        MatNativeDateModule,
                        forwardRef(() => ComponentMapperComponent)
                    ], template: "<div\n  [ngClass]=\"{\n    'psdk-block-style': inlineProps.filterPosition === 'block-start'\n  }\"\n>\n  <div *ngFor=\"let kid of children\">\n    <div *ngIf=\"kid.type === 'DateTime'\" [formGroup]=\"filtersFormGroup$\">\n      <mat-form-field class=\"psdk-full-width\">\n        <mat-label>{{ kid.label }}</mat-label>\n        <mat-date-range-input [rangePicker]=\"picker\">\n          <input matStartDate placeholder=\"Start date\" formControlName=\"start\" />\n          <input matEndDate placeholder=\"End date\" formControlName=\"end\" (dateChange)=\"dateRangeChangeHandler(kid)\" />\n        </mat-date-range-input>\n        <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"kid.c11nEnv\">\n      <span (input)=\"updateTmpData({ event: $event, field: kid })\">\n        <component-mapper\n          [name]=\"kid.c11nEnv.getPConnect().getComponentName()\"\n          [props]=\"{\n            pConn$: kid.c11nEnv.getPConnect(),\n            formGroup$: filtersFormGroup$\n          }\"\n          errorMsg=\"Dashboard filter wants component not yet available: {{ kid.c11nEnv.getPConnect().getComponentName() }}\"\n        >\n        </component-mapper>\n      </span>\n    </div>\n  </div>\n  <div>\n    <button mat-button color=\"primary\" (click)=\"clearFilters()\">Clear All</button>\n  </div>\n</div>\n", styles: [".psdk-full-width{width:100%}.psdk-block-style{display:grid;direction:column-reverse;gap:1rem;grid-template-columns:repeat(7,1fr)}::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { pConn$: [{
                type: Input
            }], filtersFormGroup$: [{
                type: Input
            }], inlineProps: [{
                type: Input
            }], children: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 