import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
import { Dictionary, IAddRedactionRequest } from '@red/domain';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
import { DictionaryService } from '@services/entity-services/dictionary.service';
import { AddAnnotationData, AddAnnotationResult } from '../../../utils/dialog-types';
import { MatFormField } from '@angular/material/form-field';
import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
import { NgForOf } from '@angular/common';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { MatDialogClose } from '@angular/material/dialog';

@Component({
    templateUrl: './add-annotation-dialog.component.html',
    standalone: true,
    imports: [
        ReactiveFormsModule,
        MatFormField,
        MatSelectTrigger,
        MatSelect,
        MatOption,
        NgForOf,
        MatTooltip,
        HasScrollbarDirective,
        IconButtonComponent,
        TranslateModule,
        CircleButtonComponent,
        MatDialogClose,
    ],
})
export class AddAnnotationDialogComponent
    extends IqserDialogComponent<AddAnnotationDialogComponent, AddAnnotationData, AddAnnotationResult>
    implements OnInit
{
    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
    readonly iconButtonTypes = IconButtonTypes;
    dictionaries: Dictionary[] = [];
    readonly form = this.#getForm();

    constructor(
        private readonly _dictionaryService: DictionaryService,
        private readonly _formBuilder: FormBuilder,
    ) {
        super();
    }

    get displayedDictionaryLabel() {
        const dictType = this.form.controls.dictionary.value;
        if (dictType) {
            return this.dictionaries.find(d => d.type === dictType)?.label ?? null;
        }
        return null;
    }

    get disabled() {
        return !this.form.controls.dictionary.value;
    }

    ngOnInit() {
        this.dictionaries = this._dictionaryService.getRedactionTypes(this.#dossier.dossierTemplateId);
    }

    save(): void {
        this.#enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry);
        const redaction = this.data.manualRedactionEntryWrapper.manualRedactionEntry;
        this.close({
            redaction,
            dictionary: this.dictionaries.find(d => d.type === this.form.controls.dictionary.value),
        });
    }

    #getForm() {
        return this._formBuilder.group({
            selectedText: this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value,
            comment: [null],
            dictionary: [null],
        });
    }

    #enhanceManualRedaction(addRedactionRequest: IAddRedactionRequest) {
        addRedactionRequest.type = this.form.controls.dictionary.value;

        const selectedType = this.dictionaries.find(d => d.type === addRedactionRequest.type);
        addRedactionRequest.addToDictionary = !!selectedType?.hasDictionary;
        addRedactionRequest.reason ??= 'Dictionary Request';

        const commentValue = this.form.controls.comment.value;
        addRedactionRequest.comment = commentValue ? { text: commentValue } : null;
        addRedactionRequest.section = null;
        addRedactionRequest.value = this.form.controls.selectedText.value;
        addRedactionRequest.addToAllDossiers = addRedactionRequest.addToDictionary || !!this.data.applyToAllDossiers;
    }
}
