import { ChangeDetectionStrategy, Component } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
import { combineLatest } from 'rxjs';
import { filter, map, startWith } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../data/providers/data.service";
import * as i2 from "../../providers/channel/channel.service";
import * as i3 from "@angular/common";
import * as i4 from "@clr/angular";
import * as i5 from "@angular/forms";
import * as i6 from "../../shared/components/form-field/form-field-control.directive";
import * as i7 from "../../shared/components/dropdown/dropdown.component";
import * as i8 from "../../shared/components/dropdown/dropdown-menu.component";
import * as i9 from "../../shared/components/dropdown/dropdown-trigger.directive";
import * as i10 from "../../shared/components/dropdown/dropdown-item.directive";
import * as i11 from "../../shared/components/channel-badge/channel-badge.component";
import * as i12 from "@ngx-translate/core";
import * as i13 from "../../shared/pipes/channel-label.pipe";
export class ChannelSwitcherComponent {
    constructor(dataService, channelService) {
        this.dataService = dataService;
        this.channelService = channelService;
        this.displayFilterThreshold = 10;
        this.filterControl = new UntypedFormControl('');
    }
    ngOnInit() {
        const channels$ = this.dataService.client.userStatus().mapStream(data => data.userStatus.channels);
        const filterTerm$ = this.filterControl.valueChanges.pipe(startWith(''));
        this.channels$ = combineLatest(channels$, filterTerm$).pipe(map(([channels, filterTerm]) => filterTerm
            ? channels.filter(c => c.code.toLocaleLowerCase().includes(filterTerm.toLocaleLowerCase()))
            : channels));
        this.channelCount$ = channels$.pipe(map(channels => channels.length));
        const activeChannel$ = this.dataService.client
            .userStatus()
            .mapStream(data => data.userStatus.channels.find(c => c.id === data.userStatus.activeChannelId))
            .pipe(filter(notNullOrUndefined));
        this.activeChannelCode$ = activeChannel$.pipe(map(channel => channel.code));
    }
    setActiveChannel(channelId) {
        this.channelService.setActiveChannel(channelId).subscribe(() => this.filterControl.patchValue(''));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\n    <vdr-dropdown>\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\n            <span class=\"channel-label\">{{\n                activeChannelCode$ | async | channelCodeToLabel | translate\n            }}</span>\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\n        </button>\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n            <input\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\n                [formControl]=\"filterControl\"\n                type=\"text\"\n                class=\"ml2 mr2\"\n                [placeholder]=\"'common.filter' | translate\"\n            />\n            <button\n                *ngFor=\"let channel of channels$ | async\"\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"setActiveChannel(channel.id)\"\n            >\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n                {{ channel.code | channelCodeToLabel | translate }}\n            </button>\n        </vdr-dropdown-menu>\n    </vdr-dropdown>\n</ng-container>\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i10.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i11.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n    <vdr-dropdown>\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\n            <span class=\"channel-label\">{{\n                activeChannelCode$ | async | channelCodeToLabel | translate\n            }}</span>\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\n        </button>\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n            <input\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\n                [formControl]=\"filterControl\"\n                type=\"text\"\n                class=\"ml2 mr2\"\n                [placeholder]=\"'common.filter' | translate\"\n            />\n            <button\n                *ngFor=\"let channel of channels$ | async\"\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"setActiveChannel(channel.id)\"\n            >\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n                {{ channel.code | channelCodeToLabel | translate }}\n            </button>\n        </vdr-dropdown-menu>\n    </vdr-dropdown>\n</ng-container>\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.ChannelService }]; } });
//# sourceMappingURL=data:application/json;base64, 