import { Component, Input } from '@angular/core';
import { hasValue, TomtomService } from '@aztrix/helpers';
import { PropertyType, TomTomIdxType } from '@aztrix/models';
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { AutocompletionComponent } from '../autocompletion.component';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/autocomplete";
import * as i4 from "@angular/material/core";
import * as i5 from "@aztrix/icons";
import * as i6 from "@aztrix/components/spinner";
export var AutocompleteType;
(function (AutocompleteType) {
    AutocompleteType["ADDRESS"] = "ADDRESS";
    AutocompleteType["STREET"] = "STREET";
    AutocompleteType["MANUAL"] = "MANUAL";
})(AutocompleteType || (AutocompleteType = {}));
export class AddressAutocompletionComponent extends AutocompletionComponent {
    constructor(_tomTom) {
        super();
        this._tomTom = _tomTom;
        this.propertyType = PropertyType.ADDRESS;
        this.showManualOption = false;
        this.results$ = new ReplaySubject(1);
        this.loading$ = new BehaviorSubject(false);
        this.showManualOption$ = new BehaviorSubject(false);
        this.properties$ = new ReplaySubject(1);
    }
    ngOnChanges(changes) {
        if (changes.properties && this.properties) {
            this.properties$.next(this.properties.filter((p) => hasValue(p)));
        }
    }
    autocomplete({ query, country }) {
        this.loading$.next(true);
        if (!query || typeof query !== 'string') {
            this.loading$.next(false);
            this.results$.next([]);
            return;
        }
        const types = this.propertyType === PropertyType.ADDRESS
            ? [TomTomIdxType.POINT_ADDRESS, TomTomIdxType.RANGE_ADDRESS, TomTomIdxType.STREET]
            : [TomTomIdxType.GEOGRAPHY];
        this._tomTom.search(query, country || 'BE', types).subscribe({
            next: (results) => {
                this.results$.next(results);
                this.showManualOption$.next(this.showManualOption);
            },
            error: () => {
                this.results$.next([]);
                this.loading$.next(false);
            },
            complete: () => {
                this.loading$.next(false);
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddressAutocompletionComponent, deps: [{ token: i1.TomtomService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddressAutocompletionComponent, selector: "ax-address-autocompletion", inputs: { properties: "properties", propertyType: "propertyType", showManualOption: "showManualOption" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-autocomplete\n  class=\"autocomplete\"\n  #autocompletor=\"matAutocomplete\"\n  (optionSelected)=\"selectedResult($event)\"\n>\n  <ng-container *ngFor=\"let property of properties$ | async\">\n    <mat-option\n      *ngIf=\"property | propertyDisplayValue\"\n      class=\"autocomplete-option\"\n      [value]=\"property\"\n    >\n      <ax-icon class=\"icon\" name=\"map-marker\"></ax-icon>\n      <span class=\"c-select-option__text\">\n        {{ property | propertyDisplayValue }}\n      </span>\n    </mat-option>\n  </ng-container>\n\n  <ng-container *ngIf=\"(results$ | async) && (loading$ | async) === false; else loading\">\n    <mat-optgroup *ngIf=\"(results$ | async)?.length\" [label]=\"'label.search.results' | translate\">\n      <mat-option\n        *ngFor=\"let result of results$ | async\"\n        class=\"autocomplete-option\"\n        [value]=\"result\"\n      >\n        <ax-icon class=\"icon\" name=\"map-marker\"></ax-icon>\n        <span class=\"c-select-option__text\">\n          {{ result | propertyDisplayValue }}\n        </span>\n      </mat-option>\n    </mat-optgroup>\n  </ng-container>\n\n  <mat-option class=\"autocomplete-option\" *ngIf=\"showManualOption$ | async\">\n    <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n    <span class=\"c-select-option__text\">\n      {{ 'label.add.custom.address' | translate }}\n    </span>\n  </mat-option>\n</mat-autocomplete>\n\n<ng-template #loading>\n  <ax-spinner></ax-spinner>\n</ng-template>\n", styles: [".autocomplete-option{height:auto;padding-top:.5rem;padding-bottom:.5rem}.autocomplete-option ::ng-deep .mdc-list-item__primary-text{display:flex;align-items:center}.autocomplete-option ::ng-deep .mdc-list-item__primary-text .icon{margin-right:.5rem;flex-shrink:0}.autocomplete-option ::ng-deep .mdc-list-item__primary-text .post-icon{width:1rem;height:1rem;margin-left:.25rem;vertical-align:text-bottom}\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: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i6.SpinnerComponent, selector: "ax-spinner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.PropertyDisplayValuePipe, name: "propertyDisplayValue" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddressAutocompletionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-address-autocompletion', template: "<mat-autocomplete\n  class=\"autocomplete\"\n  #autocompletor=\"matAutocomplete\"\n  (optionSelected)=\"selectedResult($event)\"\n>\n  <ng-container *ngFor=\"let property of properties$ | async\">\n    <mat-option\n      *ngIf=\"property | propertyDisplayValue\"\n      class=\"autocomplete-option\"\n      [value]=\"property\"\n    >\n      <ax-icon class=\"icon\" name=\"map-marker\"></ax-icon>\n      <span class=\"c-select-option__text\">\n        {{ property | propertyDisplayValue }}\n      </span>\n    </mat-option>\n  </ng-container>\n\n  <ng-container *ngIf=\"(results$ | async) && (loading$ | async) === false; else loading\">\n    <mat-optgroup *ngIf=\"(results$ | async)?.length\" [label]=\"'label.search.results' | translate\">\n      <mat-option\n        *ngFor=\"let result of results$ | async\"\n        class=\"autocomplete-option\"\n        [value]=\"result\"\n      >\n        <ax-icon class=\"icon\" name=\"map-marker\"></ax-icon>\n        <span class=\"c-select-option__text\">\n          {{ result | propertyDisplayValue }}\n        </span>\n      </mat-option>\n    </mat-optgroup>\n  </ng-container>\n\n  <mat-option class=\"autocomplete-option\" *ngIf=\"showManualOption$ | async\">\n    <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n    <span class=\"c-select-option__text\">\n      {{ 'label.add.custom.address' | translate }}\n    </span>\n  </mat-option>\n</mat-autocomplete>\n\n<ng-template #loading>\n  <ax-spinner></ax-spinner>\n</ng-template>\n", styles: [".autocomplete-option{height:auto;padding-top:.5rem;padding-bottom:.5rem}.autocomplete-option ::ng-deep .mdc-list-item__primary-text{display:flex;align-items:center}.autocomplete-option ::ng-deep .mdc-list-item__primary-text .icon{margin-right:.5rem;flex-shrink:0}.autocomplete-option ::ng-deep .mdc-list-item__primary-text .post-icon{width:1rem;height:1rem;margin-left:.25rem;vertical-align:text-bottom}\n"] }]
        }], ctorParameters: () => [{ type: i1.TomtomService }], propDecorators: { properties: [{
                type: Input
            }], propertyType: [{
                type: Input
            }], showManualOption: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 