import { Component, computed, input } from '@angular/core';
import { NgClass, NgForOf, NgStyle } from '@angular/common';

export interface ValueColumn {
    label: string;
    hide?: boolean;
    bold?: boolean;
    width?: string;
}

const TABLE_ROW_SIZE = 20;
const MAX_ITEMS_DISPLAY = 10;

@Component({
    selector: 'redaction-selected-annotations-table',
    standalone: true,
    imports: [NgForOf, NgClass, NgStyle],
    templateUrl: './selected-annotations-table.component.html',
    styleUrl: './selected-annotations-table.component.scss',
})
export class SelectedAnnotationsTableComponent {
    readonly defaultColumnWidth = input(false);

    readonly columns = input.required<ValueColumn[]>();
    readonly _columns = computed(() => this.columns().filter(item => !this.defaultColumnWidth() || !item.hide));

    readonly data = input.required<ValueColumn[][]>();
    readonly _data = computed(() => this.data().map(item => item.filter(cell => !this.defaultColumnWidth() || !cell.hide)));

    readonly redactedTextsAreaHeight = computed(
        () =>
            (this._data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this._data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY) +
            TABLE_ROW_SIZE,
    );

    readonly gridConfig = computed(() => ({
        height: `${this.redactedTextsAreaHeight()}px`,
        'grid-template-columns': !this.defaultColumnWidth() ? this.#computeCustomColumnWidths() : this.#getDefaultColumnWidth(),
        'grid-template-rows': `repeat(${this._data().length + 1}, ${TABLE_ROW_SIZE}px)`,
    }));

    #computeCustomColumnWidths() {
        return this._columns()
            .map(column => column.width ?? `auto`)
            .join(' ');
    }

    #getDefaultColumnWidth() {
        return `repeat(${this._columns().length}, 1fr)`;
    }
}
