import { Component, EventEmitter, Output } from '@angular/core';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { AnnotationReferencesService } from '../../services/annotation-references.service';
import { Observable, switchMap } from 'rxjs';
import { AnnotationsListingService } from '../../services/annotations-listing.service';
import { filter } from 'rxjs/operators';
import { toObservable } from '@angular/core/rxjs-interop';

@Component({
    selector: 'redaction-annotation-references-list',
    templateUrl: './annotation-references-list.component.html',
    styleUrls: ['./annotation-references-list.component.scss'],
})
export class AnnotationReferencesListComponent {
    @Output() readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
    readonly isSelected$: Observable<boolean>;
    readonly annotation$ = toObservable(this.annotationReferencesService.annotation);

    constructor(
        private readonly _listingService: AnnotationsListingService,
        readonly annotationReferencesService: AnnotationReferencesService,
    ) {
        this.isSelected$ = this.annotation$.pipe(
            filter(annotation => !!annotation),
            switchMap(annotation => this._listingService.isSelected$(annotation)),
        );
    }
}
