import { Component, computed, input } from '@angular/core';
import { ApproveResponse, File } from '@red/domain';
import { SelectedAnnotationsTableComponent } from '../../../file-preview/components/selected-annotations-table/selected-annotations-table.component';
import { MatExpansionPanel, MatExpansionPanelHeader } from '@angular/material/expansion';
import { KeyValuePipe, NgStyle } from '@angular/common';
import { WarningDetailsPanelComponent } from '@shared/components/warning-details-panel/warning-details-panel.component';
import { CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
    selector: 'redaction-approve-warning-details',
    standalone: true,
    imports: [
        SelectedAnnotationsTableComponent,
        MatExpansionPanel,
        MatExpansionPanelHeader,
        KeyValuePipe,
        WarningDetailsPanelComponent,
        CdkVirtualScrollViewport,
        CdkFixedSizeVirtualScroll,
        NgStyle,
    ],
    templateUrl: './approve-warning-details.component.html',
    styleUrl: './approve-warning-details.component.scss',
})
export class ApproveWarningDetailsComponent {
    readonly data = input.required<ApproveResponse[]>();
    readonly files = input.required<File[]>();

    readonly fileNamesByIds = computed(() => this.files().reduce((acc, file) => ({ ...acc, [file.id]: file.filename }), {}));
    readonly shouldPanelOpenDefault = computed(() => this.files().length === 1);
}
