import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../../../custom-select/src/lib/select-components";
import * as i4 from "@angular/material/tooltip";
export class GeoSelectComponentClass {
    constructor(formBuilder) {
        this.formBuilder = formBuilder;
        this.isDisabled = false;
        this.chousenGeo = new EventEmitter();
        this.newTargets = new EventEmitter();
        this.targets = [];
        this.countriesMap = [{ alpha2Code: 'US', value: 'USA', name: 'United States' }];
        this.geoForm = this.formBuilder.group({
            country: [],
            state: [],
            city: [],
        });
        this.geoForm.get('country').valueChanges.subscribe((value) => {
            this.geoForm.get('state').setValue(null);
            this.chousenGeo.emit({ type: 'states', val: value });
        });
        this.geoForm.get('state').valueChanges.subscribe((value) => {
            this.geoForm.get('city').setValue(null);
            this.chousenGeo.emit({ type: 'cities', val: value });
        });
    }
    addTarget(ruleStr) {
        if (!this.geoForm.get('country').value || this.geoForm.get('country').value.length === 0) {
            return false;
        }
        const target = {
            country: this.geoForm.get('country').value[0],
            countryName: this.countriesMap.filter((country) => this.geoForm.get('country').value[0] === country.value)[0]
                .name,
            rule: ruleStr,
        };
        if (this.geoForm.get('state').value) {
            target['state'] = this.geoForm.get('state').value[0];
        }
        if (this.geoForm.get('city').value) {
            target['city'] = this.geoForm.get('city').value[0];
        }
        const existing = this.targets.find((existingTarget) => {
            if (target.country === existingTarget.country &&
                target['state'] === existingTarget.state &&
                target['city'] === existingTarget.city) {
                return existingTarget;
            }
        });
        if (!existing) {
            this.targets.push(target);
        }
        this.emitTargets();
    }
    removeTarget(index) {
        this.targets.splice(index, 1);
        this.emitTargets();
    }
    clearTargets() {
        this.targets = [];
        this.emitTargets();
    }
    emitTargets() {
        this.newTargets.emit(this.targets);
    }
    ngOnInit() {
        this.countries.subscribe((x) => {
            this.countriesMap = this.countriesMap.concat(x);
            if (this.initial) {
                this.initial.map((initial) => {
                    initial.countryName = this.countriesMap.filter((country) => initial.country === country.value)[0].name;
                    return initial;
                });
                this.targets = this.initial;
                this.emitTargets();
            }
        });
    }
}
GeoSelectComponentClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoSelectComponentClass, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
GeoSelectComponentClass.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeoSelectComponentClass, selector: "epom-popup-geo", inputs: { isDisabled: "isDisabled", countries: ["countriesStream", "countries"], states: ["statesStream", "states"], cities: ["citiesStream", "cities"], initial: ["initialValues", "initial"] }, outputs: { chousenGeo: "chousenGeo", newTargets: "newTargets" }, ngImport: i0, template: "<div class=\"select-popup-content\">\n  <form [formGroup]=\"geoForm\" class=\"column column-left\">\n    <div class=\"form-control-wrapper\" [attr.data-qa]=\"'Country'\">\n      <custom-select\n        [valuesStream]=\"countries\"\n        [placeholder]=\"'Select Country'\"\n        [formElement]=\"geoForm.get('country')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n        [showFlag]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">Country</label>\n    </div>\n    <div class=\"form-control-wrapper mt-16\" [attr.data-qa]=\"'Region'\">\n      <custom-select\n        [valuesStream]=\"states\"\n        [placeholder]=\"'Select State'\"\n        [formElement]=\"geoForm.get('state')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">Region</label>\n    </div>\n    <div class=\"form-control-wrapper mt-16\" [attr.data-qa]=\"'City'\">\n      <custom-select\n        [valuesStream]=\"cities\"\n        [placeholder]=\"'Select City'\"\n        [formElement]=\"geoForm.get('city')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">City</label>\n    </div>\n\n    <section class=\"geo-button-section mt-16\">\n      <button\n        class=\"button button-error button-with-icon\"\n        [attr.data-qa]=\"'excludeTargeting'\"\n        (click)=\"addTarget('EXCLUDE')\"\n      >\n        <span class=\"material-icons material-icons-outlined\">remove_circle_outline</span>Exclude\n      </button>\n\n      <button\n        class=\"button button-success button-with-icon\"\n        [attr.data-qa]=\"'includeTargeting'\"\n        (click)=\"addTarget('INCLUDE')\"\n      >\n        <span class=\"material-icons material-icons-outlined\">add_circle_outline</span>Include\n      </button>\n    </section>\n  </form>\n\n  <hr class=\"vertical-line\" />\n\n  <div class=\"column column-right\">\n    <section class=\"selected-top-header\">\n      <span class=\"geo-selected-title\">Selected ({{ targets.length ? targets.length : 'Any' }})</span>\n      <a *ngIf=\"targets.length\" class=\"button-link button-link-big button-link-primary\" (click)=\"clearTargets()\">\n        Clear all\n      </a>\n    </section>\n\n    <section *ngIf=\"!targets.length\" class=\"geo-empty-state\">No geo restrictions for campaign targeting.</section>\n\n    <section class=\"geo-list\">\n      <div *ngFor=\"let target of targets; let i = index\" class=\"geo-item-block\">\n        <div class=\"geo-item\">\n          <div>\n            {{target.countryName}}<span *ngIf=\"target.state\">, {{target.state}}</span\n            ><span *ngIf=\"target.city\">, {{target.city === 'Kiev' ? 'Kyiv' : target.city}}</span>\n          </div>\n\n          <ng-container *ngIf=\"target['rule'] === 'INCLUDE'; else excludeBlock\">\n            <span class=\"geo-status geo-include-status\">\n              <label class=\"icon\">\n                <svg height=\"10\" width=\"10\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle class=\"geo-include-circle\" r=\"5\" cx=\"5\" cy=\"5\" />\n                </svg>\n              </label>\n              <span class=\"geo-status-marked-text\">Included</span>\n            </span>\n          </ng-container>\n\n          <ng-template #excludeBlock>\n            <span class=\"geo-status geo-exclude-status\">\n              <label class=\"icon\">\n                <svg height=\"10\" width=\"10\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle class=\"geo-exclude-circle\" r=\"5\" cx=\"5\" cy=\"5\" />\n                </svg>\n              </label>\n              <span class=\"geo-status-marked-text\">Excluded</span>\n            </span>\n          </ng-template>\n        </div>\n\n        <span\n          class=\"material-icons material-icons-outlined button-icon button-icon-middle button-icon-outline\"\n          matTooltip=\"Remove\"\n          [matTooltipPosition]=\"'above'\"\n          [attr.data-qa]=\"'deleteFromSelected'\"\n          (click)=\"removeTarget(i)\"\n        >\n          close\n        </span>\n      </div>\n    </section>\n  </div>\n</div>\n", styles: [":host{flex:1}.geo-body-modal{display:flex;justify-content:space-between;gap:16px}.selected-top-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.geo-selected-title{font-weight:700;line-height:21px}.geo-button-section{display:flex;align-items:center;justify-content:end;gap:16px}.geo-select-menu{width:477px;padding-bottom:16px}.geo-selected-block{width:100%}.geo-list{display:flex;flex-direction:column;gap:8px;max-height:509px}.geo-item-block{display:flex;align-items:center;justify-content:space-between;gap:21px}.geo-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 24px 11px 16px;border-radius:4px;border:1px solid var(--neutral-outline-variant-color)}.geo-status{display:flex;align-items:center;font-size:12px;line-height:18px;gap:4px}.geo-status label{margin-bottom:0}.geo-status .geo-status-marked-text{width:51px}.geo-include-status{color:var(--light-success)}.geo-exclude-status{color:var(--error-default-color)}.geo-include-circle{fill:var(--light-success)}.geo-exclude-circle{fill:var(--error-default-color)}.geo-empty-state{display:flex;justify-content:center;font-size:12px;color:var(--neutral-outline-color);line-height:18px}@media (max-height: 820px){.geo-selected-block .geo-list{max-height:428px}}\n"], dependencies: [{ 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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoSelectComponentClass, decorators: [{
            type: Component,
            args: [{ selector: 'epom-popup-geo', template: "<div class=\"select-popup-content\">\n  <form [formGroup]=\"geoForm\" class=\"column column-left\">\n    <div class=\"form-control-wrapper\" [attr.data-qa]=\"'Country'\">\n      <custom-select\n        [valuesStream]=\"countries\"\n        [placeholder]=\"'Select Country'\"\n        [formElement]=\"geoForm.get('country')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n        [showFlag]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">Country</label>\n    </div>\n    <div class=\"form-control-wrapper mt-16\" [attr.data-qa]=\"'Region'\">\n      <custom-select\n        [valuesStream]=\"states\"\n        [placeholder]=\"'Select State'\"\n        [formElement]=\"geoForm.get('state')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">Region</label>\n    </div>\n    <div class=\"form-control-wrapper mt-16\" [attr.data-qa]=\"'City'\">\n      <custom-select\n        [valuesStream]=\"cities\"\n        [placeholder]=\"'Select City'\"\n        [formElement]=\"geoForm.get('city')\"\n        [useClear]=\"true\"\n        [clearLikeOption]=\"true\"\n      ></custom-select>\n      <label class=\"control-label select-label\">City</label>\n    </div>\n\n    <section class=\"geo-button-section mt-16\">\n      <button\n        class=\"button button-error button-with-icon\"\n        [attr.data-qa]=\"'excludeTargeting'\"\n        (click)=\"addTarget('EXCLUDE')\"\n      >\n        <span class=\"material-icons material-icons-outlined\">remove_circle_outline</span>Exclude\n      </button>\n\n      <button\n        class=\"button button-success button-with-icon\"\n        [attr.data-qa]=\"'includeTargeting'\"\n        (click)=\"addTarget('INCLUDE')\"\n      >\n        <span class=\"material-icons material-icons-outlined\">add_circle_outline</span>Include\n      </button>\n    </section>\n  </form>\n\n  <hr class=\"vertical-line\" />\n\n  <div class=\"column column-right\">\n    <section class=\"selected-top-header\">\n      <span class=\"geo-selected-title\">Selected ({{ targets.length ? targets.length : 'Any' }})</span>\n      <a *ngIf=\"targets.length\" class=\"button-link button-link-big button-link-primary\" (click)=\"clearTargets()\">\n        Clear all\n      </a>\n    </section>\n\n    <section *ngIf=\"!targets.length\" class=\"geo-empty-state\">No geo restrictions for campaign targeting.</section>\n\n    <section class=\"geo-list\">\n      <div *ngFor=\"let target of targets; let i = index\" class=\"geo-item-block\">\n        <div class=\"geo-item\">\n          <div>\n            {{target.countryName}}<span *ngIf=\"target.state\">, {{target.state}}</span\n            ><span *ngIf=\"target.city\">, {{target.city === 'Kiev' ? 'Kyiv' : target.city}}</span>\n          </div>\n\n          <ng-container *ngIf=\"target['rule'] === 'INCLUDE'; else excludeBlock\">\n            <span class=\"geo-status geo-include-status\">\n              <label class=\"icon\">\n                <svg height=\"10\" width=\"10\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle class=\"geo-include-circle\" r=\"5\" cx=\"5\" cy=\"5\" />\n                </svg>\n              </label>\n              <span class=\"geo-status-marked-text\">Included</span>\n            </span>\n          </ng-container>\n\n          <ng-template #excludeBlock>\n            <span class=\"geo-status geo-exclude-status\">\n              <label class=\"icon\">\n                <svg height=\"10\" width=\"10\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <circle class=\"geo-exclude-circle\" r=\"5\" cx=\"5\" cy=\"5\" />\n                </svg>\n              </label>\n              <span class=\"geo-status-marked-text\">Excluded</span>\n            </span>\n          </ng-template>\n        </div>\n\n        <span\n          class=\"material-icons material-icons-outlined button-icon button-icon-middle button-icon-outline\"\n          matTooltip=\"Remove\"\n          [matTooltipPosition]=\"'above'\"\n          [attr.data-qa]=\"'deleteFromSelected'\"\n          (click)=\"removeTarget(i)\"\n        >\n          close\n        </span>\n      </div>\n    </section>\n  </div>\n</div>\n", styles: [":host{flex:1}.geo-body-modal{display:flex;justify-content:space-between;gap:16px}.selected-top-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.geo-selected-title{font-weight:700;line-height:21px}.geo-button-section{display:flex;align-items:center;justify-content:end;gap:16px}.geo-select-menu{width:477px;padding-bottom:16px}.geo-selected-block{width:100%}.geo-list{display:flex;flex-direction:column;gap:8px;max-height:509px}.geo-item-block{display:flex;align-items:center;justify-content:space-between;gap:21px}.geo-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 24px 11px 16px;border-radius:4px;border:1px solid var(--neutral-outline-variant-color)}.geo-status{display:flex;align-items:center;font-size:12px;line-height:18px;gap:4px}.geo-status label{margin-bottom:0}.geo-status .geo-status-marked-text{width:51px}.geo-include-status{color:var(--light-success)}.geo-exclude-status{color:var(--error-default-color)}.geo-include-circle{fill:var(--light-success)}.geo-exclude-circle{fill:var(--error-default-color)}.geo-empty-state{display:flex;justify-content:center;font-size:12px;color:var(--neutral-outline-color);line-height:18px}@media (max-height: 820px){.geo-selected-block .geo-list{max-height:428px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { isDisabled: [{
                type: Input,
                args: ['isDisabled']
            }], countries: [{
                type: Input,
                args: ['countriesStream']
            }], states: [{
                type: Input,
                args: ['statesStream']
            }], cities: [{
                type: Input,
                args: ['citiesStream']
            }], initial: [{
                type: Input,
                args: ['initialValues']
            }], chousenGeo: [{
                type: Output,
                args: ['chousenGeo']
            }], newTargets: [{
                type: Output,
                args: ['newTargets']
            }] } });
//# sourceMappingURL=data:application/json;base64, 