import { AfterContentInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , ViewRef } from '@angular/core' ; import { IOption } from 'ng-select' ; import { Observable } from 'rxjs' ; import { filter , map , takeUntil , tap } from 'rxjs/operators' ; import { MercenariesHeroLevelFilterSelectedEvent } from '../../../../services/mainwindow/store/events/mercenaries/mercenaries-hero-level-filter-selected-event' ; import { AppUiStoreFacadeService } from '../../../../services/ui-store/app-ui-store-facade.service' ; import { AbstractSubscriptionComponent } from '../../../abstract-subscription.component' ; @ Component ( { selector : 'mercenaries-hero-level-filter-dropdown' , styleUrls : [ `../../../../../css/global/filters.scss` , `../../../../../css/component/app-section.component.scss` , `../../../../../css/component/filter-dropdown.component.scss` , ] , template : `
		<filter-dropdown
			*ngIf="filter$ | async as value"
			class="mercenaries-hero-level-filter-dropdown"
			[options]="options"
			[filter]="value.filter"
			[placeholder]="value.placeholder"
			[visible]="value.visible"
			(onOptionSelected)="onSelected($event)"
		></filter-dropdown>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MercenariesHeroLevelFilterDropdownComponent extends AbstractSubscriptionComponent implements AfterContentInit { options : readonly FilterOption [ ] ; filter$ : Observable < { filter : string ; placeholder : string ; visible : boolean ; } > ; constructor ( protected readonly store , protected readonly cdr ) { super ( store , cdr ) ; } ngAfterContentInit ( ) { this . options = [ { value : '0' , label : 'All levels' , } as FilterOption , { value : '1' , label : 'Levels 1-4' , } as FilterOption , { value : '5' , label : 'Levels 5-14' , } as FilterOption , { value : '15' , label : 'Levels 15-29' , } as FilterOption , { value : '30' , label : 'Level 30' , } as FilterOption , ] as readonly FilterOption [ ] ; this . filter$ = this . store . listen$ ( ( [ main , nav , prefs ] ) => main . mercenaries . globalStats , ( [ main , nav , prefs ] ) => prefs . mercenariesActiveHeroLevelFilter2 , ( [ main , nav ] ) => nav . navigationMercenaries . selectedCategoryId ) . pipe ( filter ( ( [ globalStats , filter , selectedCategoryId ] ) => ! ! filter && ! ! selectedCategoryId ) , map ( ( [ globalStats , filter , selectedCategoryId ] ) => ( { filter : '' + filter , placeholder : this . options . find ( ( option ) => option . value === '' + filter ) ?. label ?? this . options [ 0 ] . label , visible : false , } ) ) , tap ( ( filter ) => setTimeout ( ( ) => { if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } , 0 ) ) , takeUntil ( this . destroyed$ ) ) ; } onSelected ( option ) { this . store . send ( new MercenariesHeroLevelFilterSelectedEvent ( + option . value as any ) ) ; } } interface FilterOption extends IOption { value : string ; }