import { Component, Input } from '@angular/core';
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { NgStyle } from '@angular/common';

const LIST_ITEM_SIZE = 16;
const MAX_ITEMS_DISPLAY = 5;

@Component({
    selector: 'redaction-selected-annotations-list',
    standalone: true,
    imports: [CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, NgStyle],
    templateUrl: './selected-annotations-list.component.html',
    styleUrl: './selected-annotations-list.component.scss',
})
export class SelectedAnnotationsListComponent {
    @Input({ required: true }) values: string[];
    protected readonly LIST_ITEM_SIZE = LIST_ITEM_SIZE;

    get redactedTextsAreaHeight() {
        return this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY;
    }
}
