import { Component, computed, inject, input } from '@angular/core';
import {
    SelectedAnnotationsTableComponent,
    ValueColumn,
} from '../../../file-preview/components/selected-annotations-table/selected-annotations-table.component';
import { WarningModel } from '@red/domain';
import { MatExpansionPanel, MatExpansionPanelHeader } from '@angular/material/expansion';
import { approvalWarningReasonTranslations } from '@translations/approval-warning-reason-translations';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'redaction-warning-details-panel',
    standalone: true,
    imports: [MatExpansionPanel, MatExpansionPanelHeader, SelectedAnnotationsTableComponent],
    templateUrl: './warning-details-panel.component.html',
    styleUrl: './warning-details-panel.component.scss',
})
export class WarningDetailsPanelComponent {
    readonly warnings = input<WarningModel[]>();
    readonly filename = input<string>();
    readonly openByDefault = input<boolean>();
    readonly tableColumns = computed<ValueColumn[]>(() => [
        { label: 'Value' },
        { label: 'Type' },
        { label: 'Page' },
        {
            label: 'Warning Reason',
            width: '40%',
        },
    ]);
    readonly #translateService = inject(TranslateService);
    readonly tableData = computed<ValueColumn[][]>(() =>
        this.warnings().map(warning => [
            { label: warning.value, bold: true },
            { label: warning.type },
            { label: warning.pages.join(',') },
            {
                label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]),
            },
        ]),
    );
}
