import { Component, computed, effect, HostBinding, inject, input } from '@angular/core';
import { getConfig, StopPropagationDirective } from '@iqser/common-ui';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { ListItem } from '@models/file/list-item';
import { MultiSelectService } from '../../services/multi-select.service';
import { PdfProxyService } from '../../services/pdf-proxy.service';
import { ActionsHelpModeKeys } from '../../utils/constants';
import { AnnotationCardComponent } from '../annotation-card/annotation-card.component';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { MatIcon } from '@angular/material/icon';
import { AnnotationActionsComponent } from '../annotation-actions/annotation-actions.component';
import { CommentsComponent } from '../comments/comments.component';
import { AnnotationDetailsComponent } from '../annotation-details/annotation-details.component';
import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';

@Component({
    selector: 'redaction-annotation-wrapper',
    templateUrl: './annotation-wrapper.component.html',
    styleUrls: ['./annotation-wrapper.component.scss'],
    standalone: true,
    imports: [
        AnnotationCardComponent,
        MatTooltip,
        TranslateModule,
        StopPropagationDirective,
        MatIcon,
        AnnotationActionsComponent,
        CommentsComponent,
        AnnotationDetailsComponent,
        ReplaceNbspPipe,
    ],
})
export class AnnotationWrapperComponent {
    readonly annotation = input.required<ListItem<AnnotationWrapper>>();
    @HostBinding('attr.annotation-id') annotationId: string;
    @HostBinding('class.active') active: boolean;

    readonly actionsHelpModeKey = computed(() => this.#getActionsHelpModeKey(this.annotation().item));
    showComments = false;
    protected readonly pdfProxyService = inject(PdfProxyService);
    protected readonly multiSelectService = inject(MultiSelectService);
    readonly #isDocumine = getConfig().IS_DOCUMINE;

    constructor() {
        effect(() => {
            this.active = this.annotation().isSelected;
            this.annotationId = this.annotation().item.id;
        });
    }

    #getActionsHelpModeKey(item: AnnotationWrapper): string {
        if (!this.#isDocumine) {
            const superType = item.superTypeLabel?.split('.')[1];
            const type = item.type;
            if (superType === 'hint' && (type === 'ocr' || type === 'formula' || type === 'image')) {
                return ActionsHelpModeKeys[`${superType}-${type}`];
            }
            return ActionsHelpModeKeys[superType];
        }
        return '';
    }
}
