import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { cloneDeep } from 'lodash';
import { of, Subject } from 'rxjs';
import { CONDITIONS_LIST } from '../../popup.constants';
import { takeUntil } from 'rxjs/operators';
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";
import * as i4 from "../../../checkbox-button/checkbox-button.component";
export class PopupSelectVersionsComponentClass {
    constructor() {
        this.popupSelectedOutput = new EventEmitter();
        this.checkAvailabilityForm = new EventEmitter();
        this.conditionsList = of(CONDITIONS_LIST);
        this.destroy$ = new Subject();
    }
    ngOnInit() {
        this.targetingForm = cloneDeep(this.initialFormState);
        this.disableVersionControlsByInit();
        this.trackCheckboxChanges();
    }
    changeCheckboxState(event, control) {
        if (event.target) {
            this.manageVersionControl(event.target.checked, this.targetingForm.get([control, 'version']));
            this.emitData();
        }
        else {
            this.targetingForm.get([control, 'relation']).patchValue(event[0]);
        }
        this.emitData();
    }
    emitData() {
        this.popupSelectedOutput.emit(this.targetingForm.value);
        this.checkAvailabilityForm.emit(this.targetingForm.valid);
    }
    disableVersionControlsByInit() {
        const formValue = this.targetingForm.value;
        Object.keys(formValue).forEach((key) => {
            const controlValue = this.targetingForm.get(key).value;
            if (!key.includes('TargetType') && !controlValue['checked']) {
                this.targetingForm.get([key, 'version']).disable();
            }
        });
    }
    trackCheckboxChanges() {
        Object.keys(this.targetingForm.controls).forEach((key) => {
            const controlGroup = this.targetingForm.get(key);
            if (controlGroup && controlGroup.get('checked')) {
                controlGroup
                    .get('checked')
                    .valueChanges.pipe(takeUntil(this.destroy$))
                    .subscribe((isChecked) => {
                    this.manageVersionControl(isChecked, controlGroup.get('version'));
                    this.emitData();
                });
            }
        });
    }
    manageVersionControl(isChecked, versionControl) {
        if (isChecked) {
            versionControl.enable();
        }
        else {
            versionControl.disable();
            versionControl.setValue(null);
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
}
PopupSelectVersionsComponentClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupSelectVersionsComponentClass, deps: [], target: i0.ɵɵFactoryTarget.Component });
PopupSelectVersionsComponentClass.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopupSelectVersionsComponentClass, selector: "epom-popup-select-versions", inputs: { initialFormState: "initialFormState", targetingData: "targetingData" }, outputs: { popupSelectedOutput: "popupSelectedOutput", checkAvailabilityForm: "checkAvailabilityForm" }, ngImport: i0, template: "<div class=\"versions-header-select\">\n  <div class=\"select-target-width\"><label class=\"control-label select-versions-label\">Target</label></div>\n  <div class=\"select-condition-width\"><label class=\"control-label select-versions-label\">Condition</label></div>\n  <div class=\"select-version-width\"><label class=\"control-label select-versions-label\">Version</label></div>\n</div>\n\n<main class=\"select-version-block\" [formGroup]=\"targetingForm\">\n  <div class=\"select-version-group\" *ngFor=\"let target of targetingData; let i = index;\">\n    <div class=\"select-target-checkbox\" [formGroupName]=\"target.controlValue\">\n      <epom-checkbox-button\n        formControlName=\"checked\"\n        [label]=\"target.viewValue\"\n        [fullWidth]=\"true\"\n      ></epom-checkbox-button>\n    </div>\n    <div class=\"select-condition-menu\" [formGroupName]=\"target.controlValue\">\n      <custom-select\n        [valuesStream]=\"conditionsList\"\n        [clearLikeOption]=\"false\"\n        [multiple]=\"false\"\n        [useClear]=\"true\"\n        [search]=\"false\"\n        [withOperation]=\"true\"\n        [disable]=\"targetingForm.get([target.controlValue, 'version']).disabled\"\n        [selectedDefaultValue]=\"\n          targetingForm.get([target.controlValue, 'relation']) ? targetingForm.get([target.controlValue, 'relation']).value : null\n        \"\n        (valueChanged)=\"changeCheckboxState($event, target.controlValue)\"\n      >\n      </custom-select>\n    </div>\n    <div class=\"select-version-input form-control-wrapper\" [formGroupName]=\"target.controlValue\">\n      <input\n        type=\"text\"\n        class=\"form-control select-version-input\"\n        placeholder=\"Version\"\n        formControlName=\"version\"\n        (input)=\"emitData()\"\n      />\n    </div>\n  </div>\n</main>\n", styles: [".select-versions-label{color:var(--neutral-on-main-neutral-color)}.versions-header-select{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.select-target-width{width:198px}.select-condition-width{width:232px}.select-version-width,.select-target-checkbox{width:198px}.select-condition-menu{width:232px}.select-version-input{height:36px;width:198px}.select-version-block{display:flex;flex-direction:column;gap:16px}.select-version-group{display:flex;align-items:center;justify-content:space-between;gap:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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"] }, { kind: "component", type: i4.CheckboxButtonComponent, selector: "epom-checkbox-button", inputs: ["label", "description", "name", "value", "id", "semibold", "fullWidth", "indeterminate", "infoText"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupSelectVersionsComponentClass, decorators: [{
            type: Component,
            args: [{ selector: 'epom-popup-select-versions', template: "<div class=\"versions-header-select\">\n  <div class=\"select-target-width\"><label class=\"control-label select-versions-label\">Target</label></div>\n  <div class=\"select-condition-width\"><label class=\"control-label select-versions-label\">Condition</label></div>\n  <div class=\"select-version-width\"><label class=\"control-label select-versions-label\">Version</label></div>\n</div>\n\n<main class=\"select-version-block\" [formGroup]=\"targetingForm\">\n  <div class=\"select-version-group\" *ngFor=\"let target of targetingData; let i = index;\">\n    <div class=\"select-target-checkbox\" [formGroupName]=\"target.controlValue\">\n      <epom-checkbox-button\n        formControlName=\"checked\"\n        [label]=\"target.viewValue\"\n        [fullWidth]=\"true\"\n      ></epom-checkbox-button>\n    </div>\n    <div class=\"select-condition-menu\" [formGroupName]=\"target.controlValue\">\n      <custom-select\n        [valuesStream]=\"conditionsList\"\n        [clearLikeOption]=\"false\"\n        [multiple]=\"false\"\n        [useClear]=\"true\"\n        [search]=\"false\"\n        [withOperation]=\"true\"\n        [disable]=\"targetingForm.get([target.controlValue, 'version']).disabled\"\n        [selectedDefaultValue]=\"\n          targetingForm.get([target.controlValue, 'relation']) ? targetingForm.get([target.controlValue, 'relation']).value : null\n        \"\n        (valueChanged)=\"changeCheckboxState($event, target.controlValue)\"\n      >\n      </custom-select>\n    </div>\n    <div class=\"select-version-input form-control-wrapper\" [formGroupName]=\"target.controlValue\">\n      <input\n        type=\"text\"\n        class=\"form-control select-version-input\"\n        placeholder=\"Version\"\n        formControlName=\"version\"\n        (input)=\"emitData()\"\n      />\n    </div>\n  </div>\n</main>\n", styles: [".select-versions-label{color:var(--neutral-on-main-neutral-color)}.versions-header-select{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.select-target-width{width:198px}.select-condition-width{width:232px}.select-version-width,.select-target-checkbox{width:198px}.select-condition-menu{width:232px}.select-version-input{height:36px;width:198px}.select-version-block{display:flex;flex-direction:column;gap:16px}.select-version-group{display:flex;align-items:center;justify-content:space-between;gap:12px}\n"] }]
        }], propDecorators: { initialFormState: [{
                type: Input,
                args: ['initialFormState']
            }], targetingData: [{
                type: Input,
                args: ['targetingData']
            }], popupSelectedOutput: [{
                type: Output,
                args: ['popupSelectedOutput']
            }], checkAvailabilityForm: [{
                type: Output,
                args: ['checkAvailabilityForm']
            }] } });
//# sourceMappingURL=data:application/json;base64, 