import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { of } from 'rxjs';
import { NUMBER_REGEXP } from '../../../validators';
import { CONDITIONS_METRIC_LIST } from '../../popup.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../../../custom-select/src/lib/select-components";
export class PopupFilterByConditionComponent {
    constructor() {
        this.selectType = 'and';
        this.popupSelectedOutput = new EventEmitter();
        this.metricFiltersList = [];
        this.conditionsList$ = of(CONDITIONS_METRIC_LIST);
        this.metricList$ = of();
    }
    get formData() {
        return this.form.get('metrics').controls;
    }
    ngOnInit() {
        this.metricFiltersList = this.initialData.metrics?.filter((i) => i);
        this.metricList$ = of(this.metricList);
        this.form = new FormGroup({
            type: new FormControl(this.initialData?.type || 'and'),
            metrics: new FormArray([]),
        });
        if (this.metricFiltersList?.filter((i) => i)?.length) {
            this.metricFiltersList?.forEach((m) => this.addPreselectedItem(m));
        }
        else {
            this.addItem();
        }
        this.form.get('type').valueChanges.subscribe(() => {
            this.form.updateValueAndValidity();
            this.emitData();
        });
    }
    ngAfterViewInit() {
        this.emitData();
    }
    elementValueChanged() {
        this.form.updateValueAndValidity();
        this.emitData();
    }
    emitData() {
        this.popupSelectedOutput.emit({ form: this.form, element: this.filterByConditionElement });
    }
    addItem() {
        this.metricFiltersList.push(this.metricFiltersList[0]);
        this.form.get('metrics').push(new FormGroup({
            metric: new FormControl(this.metricList[0].value),
            condition: new FormControl(CONDITIONS_METRIC_LIST[1].value),
            value: new FormControl(null, Validators.required),
        }));
    }
    addPreselectedItem(item) {
        this.form.get('metrics').push(new FormGroup({
            metric: new FormControl(item?.metric?.[0]),
            condition: new FormControl(item?.condition?.[0]),
            value: new FormControl(item?.value, [Validators.required, Validators.pattern(NUMBER_REGEXP)]),
        }));
    }
    removeItem(index) {
        this.form.get('metrics').removeAt(index);
        this.form.updateValueAndValidity();
        this.emitData();
    }
    getFormElement(formGroup, formControlName) {
        return formGroup.get(formControlName);
    }
}
PopupFilterByConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupFilterByConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PopupFilterByConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopupFilterByConditionComponent, selector: "epom-popup-filter-by-condition", inputs: { initialData: "initialData", metricList: "metricList", selectType: "selectType" }, outputs: { popupSelectedOutput: "popupSelectedOutput" }, viewQueries: [{ propertyName: "filterByConditionElement", first: true, predicate: ["filterByConditionElement"], descendants: true }], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"filter-by-condition\" #filterByConditionElement>\n  <span class=\"modal-select-options\">Select Type</span>\n\n  <div class=\"switchers-group\">\n    <div class=\"switchers-inline\">\n      <div class=\"switchers-inline\">\n        <input class=\"switchers\" id=\"type_1\" formControlName=\"type\" type=\"radio\" value=\"and\" />\n        <label for=\"type_1\">And</label>\n      </div>\n      <input class=\"switchers\" id=\"type_2\" formControlName=\"type\" type=\"radio\" value=\"or\" />\n      <label for=\"type_2\">Or</label>\n    </div>\n    <div class=\"switchers-inline\" *ngIf=\"form?.value?.metrics?.length === 1\">\n      <input class=\"switchers\" id=\"type_3\" formControlName=\"type\" type=\"radio\" value=\"not\" />\n      <label for=\"type_3\">Not</label>\n    </div>\n  </div>\n\n  <div class=\"version-labels\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-xs-12 col-xs-12\">\n        <div class=\"metric-label p-0 pr-0 metric-field\"><label class=\"control-label mb-8\">Metric</label></div>\n        <div class=\"metric-label p-0 pl-0 pr-0 condition-field codition-header\">\n          <label class=\"control-label mb-8\">Condition</label>\n        </div>\n        <div class=\"metric-label p-0 pl-0 ml-4 value-field\">\n          <label class=\"control-label mb-8\">Value</label>\n        </div>\n      </div>\n    </div>\n  </div>\n  <main>\n    <div class=\"targeting form-group mb-0\">\n      <div\n        class=\"col-xs-12 col-xs-12 col-xs-12 targeting switchers-inline\"\n        *ngFor=\"let target of formData; let i = index\"\n      >\n        <div class=\"col-xs-4 col-md-4 col-lg-4 pr-8 targeting-group metric-field\">\n          <custom-select\n            [valuesStream]=\"metricList$\"\n            [clearLikeOption]=\"false\"\n            [multiple]=\"false\"\n            [useClear]=\"false\"\n            [search]=\"true\"\n            [selectedDefaultValue]=\"\"\n            [formElement]=\"getFormElement(target, 'metric')\"\n            (valueChanged)=\"elementValueChanged()\"\n          >\n          </custom-select>\n        </div>\n        <div class=\"col-xs-4 col-md-4 col-lg-4 pl-4 pr-4 targeting-group condition-field\">\n          <custom-select\n            [valuesStream]=\"conditionsList$\"\n            [clearLikeOption]=\"false\"\n            [multiple]=\"false\"\n            [useClear]=\"false\"\n            [search]=\"false\"\n            [withOperation]=\"true\"\n            [formElement]=\"getFormElement(target, 'condition')\"\n            [direction]=\"'options-down'\"\n            (valueChanged)=\"elementValueChanged()\"\n          >\n          </custom-select>\n        </div>\n        <div class=\"col-xs-3 col-md-3 col-lg-3 pl-8 pr-0 targeting-group form-control-wrapper value-field\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            placeholder=\"Enter value\"\n            [formControl]=\"getFormElement(target, 'value')\"\n            (input)=\"emitData()\"\n          />\n        </div>\n        <div class=\"col-xs-1 col-md-1 col-lg-1 pl-0 remove-item\">\n          <span *ngIf=\"formData.length > 1\" class=\"label-times material-icons button-icon\" (click)=\"removeItem(i)\"\n            >highlight_off</span\n          >\n        </div>\n      </div>\n    </div>\n  </main>\n  <div class=\"add-item ml-4\" *ngIf=\"form.get('type').value !== 'not'\" (click)=\"addItem()\">\n    <span class=\"material-icons material-icons-outlined button-icon\">add_circle_outline</span>\n    <span>Add metric</span>\n  </div>\n</div>\n", styles: [".modal-select-options{font-size:12px;font-style:normal;font-weight:600;line-height:18px;color:var(--neutral-outline-color, #74777f)}.switchers-group{margin-bottom:24px;margin-top:8px}.add-item{cursor:pointer;color:var(--themePrimButtonsBg-color);font-size:12px;font-style:normal;font-weight:600;line-height:18px}.add-item:hover{color:var(--themePrimButtonsBg-hover-color)}.add-item span.material-icons{font-size:16px;font-style:normal;font-weight:600;cursor:pointer;position:relative;top:3px;right:6px}.remove-item{margin-top:8px;color:var(--neutral-outline-color)}.targeting.form-group{margin-left:-30px}.o-visible{overflow:visible}.metric-label,.targeting-group{display:inline-block;width:30%}.metric-field{width:182px}.condition-field{width:232px}.codition-header{margin-left:-10px}.value-field{width:182px}.value-field input{height:36px!important}.switchers-inline label{width:124px}:host ::ng-deep .targeting.switchers-inline label,:host ::ng-deep .targeting.switchers-inline input{height:auto}:host ::ng-deep .selected-list label{vertical-align:baseline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.SelectComponentClass, selector: "custom-select", inputs: ["valuesStream", "useClear", "clearLikeOption", "subtitle", "placeholder", "selectedDefaultIndex", "selectedDefaultValue", "formElement", "multiple", "search", "disable", "required", "direction", "maxItems", "dataQa", "canRemoveLastItem", "showFlag", "readOnly", "width", "withDescription", "withOperation", "isEmptyStateDescription", "createSelectOptionText", "selectedItemsOnTop", "startTypingText", "isSearchDelay"], outputs: ["valueChanged", "createOptionHandler", "searchHandler"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupFilterByConditionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'epom-popup-filter-by-condition', template: "<div [formGroup]=\"form\" class=\"filter-by-condition\" #filterByConditionElement>\n  <span class=\"modal-select-options\">Select Type</span>\n\n  <div class=\"switchers-group\">\n    <div class=\"switchers-inline\">\n      <div class=\"switchers-inline\">\n        <input class=\"switchers\" id=\"type_1\" formControlName=\"type\" type=\"radio\" value=\"and\" />\n        <label for=\"type_1\">And</label>\n      </div>\n      <input class=\"switchers\" id=\"type_2\" formControlName=\"type\" type=\"radio\" value=\"or\" />\n      <label for=\"type_2\">Or</label>\n    </div>\n    <div class=\"switchers-inline\" *ngIf=\"form?.value?.metrics?.length === 1\">\n      <input class=\"switchers\" id=\"type_3\" formControlName=\"type\" type=\"radio\" value=\"not\" />\n      <label for=\"type_3\">Not</label>\n    </div>\n  </div>\n\n  <div class=\"version-labels\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-xs-12 col-xs-12\">\n        <div class=\"metric-label p-0 pr-0 metric-field\"><label class=\"control-label mb-8\">Metric</label></div>\n        <div class=\"metric-label p-0 pl-0 pr-0 condition-field codition-header\">\n          <label class=\"control-label mb-8\">Condition</label>\n        </div>\n        <div class=\"metric-label p-0 pl-0 ml-4 value-field\">\n          <label class=\"control-label mb-8\">Value</label>\n        </div>\n      </div>\n    </div>\n  </div>\n  <main>\n    <div class=\"targeting form-group mb-0\">\n      <div\n        class=\"col-xs-12 col-xs-12 col-xs-12 targeting switchers-inline\"\n        *ngFor=\"let target of formData; let i = index\"\n      >\n        <div class=\"col-xs-4 col-md-4 col-lg-4 pr-8 targeting-group metric-field\">\n          <custom-select\n            [valuesStream]=\"metricList$\"\n            [clearLikeOption]=\"false\"\n            [multiple]=\"false\"\n            [useClear]=\"false\"\n            [search]=\"true\"\n            [selectedDefaultValue]=\"\"\n            [formElement]=\"getFormElement(target, 'metric')\"\n            (valueChanged)=\"elementValueChanged()\"\n          >\n          </custom-select>\n        </div>\n        <div class=\"col-xs-4 col-md-4 col-lg-4 pl-4 pr-4 targeting-group condition-field\">\n          <custom-select\n            [valuesStream]=\"conditionsList$\"\n            [clearLikeOption]=\"false\"\n            [multiple]=\"false\"\n            [useClear]=\"false\"\n            [search]=\"false\"\n            [withOperation]=\"true\"\n            [formElement]=\"getFormElement(target, 'condition')\"\n            [direction]=\"'options-down'\"\n            (valueChanged)=\"elementValueChanged()\"\n          >\n          </custom-select>\n        </div>\n        <div class=\"col-xs-3 col-md-3 col-lg-3 pl-8 pr-0 targeting-group form-control-wrapper value-field\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            placeholder=\"Enter value\"\n            [formControl]=\"getFormElement(target, 'value')\"\n            (input)=\"emitData()\"\n          />\n        </div>\n        <div class=\"col-xs-1 col-md-1 col-lg-1 pl-0 remove-item\">\n          <span *ngIf=\"formData.length > 1\" class=\"label-times material-icons button-icon\" (click)=\"removeItem(i)\"\n            >highlight_off</span\n          >\n        </div>\n      </div>\n    </div>\n  </main>\n  <div class=\"add-item ml-4\" *ngIf=\"form.get('type').value !== 'not'\" (click)=\"addItem()\">\n    <span class=\"material-icons material-icons-outlined button-icon\">add_circle_outline</span>\n    <span>Add metric</span>\n  </div>\n</div>\n", styles: [".modal-select-options{font-size:12px;font-style:normal;font-weight:600;line-height:18px;color:var(--neutral-outline-color, #74777f)}.switchers-group{margin-bottom:24px;margin-top:8px}.add-item{cursor:pointer;color:var(--themePrimButtonsBg-color);font-size:12px;font-style:normal;font-weight:600;line-height:18px}.add-item:hover{color:var(--themePrimButtonsBg-hover-color)}.add-item span.material-icons{font-size:16px;font-style:normal;font-weight:600;cursor:pointer;position:relative;top:3px;right:6px}.remove-item{margin-top:8px;color:var(--neutral-outline-color)}.targeting.form-group{margin-left:-30px}.o-visible{overflow:visible}.metric-label,.targeting-group{display:inline-block;width:30%}.metric-field{width:182px}.condition-field{width:232px}.codition-header{margin-left:-10px}.value-field{width:182px}.value-field input{height:36px!important}.switchers-inline label{width:124px}:host ::ng-deep .targeting.switchers-inline label,:host ::ng-deep .targeting.switchers-inline input{height:auto}:host ::ng-deep .selected-list label{vertical-align:baseline}\n"] }]
        }], propDecorators: { filterByConditionElement: [{
                type: ViewChild,
                args: ['filterByConditionElement']
            }], initialData: [{
                type: Input,
                args: ['initialData']
            }], metricList: [{
                type: Input,
                args: ['metricList']
            }], selectType: [{
                type: Input,
                args: ['selectType']
            }], popupSelectedOutput: [{
                type: Output,
                args: ['popupSelectedOutput']
            }] } });
//# sourceMappingURL=data:application/json;base64, 