import { NgIf } from '@angular/common';
import { Component, inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatDialogClose } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
import { DetailsRadioOption } from '@common-ui/inputs/details-radio/details-radio-option';
import { DetailsRadioComponent } from '@common-ui/inputs/details-radio/details-radio.component';
import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
import { TranslateModule } from '@ngx-translate/core';
import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { getResizeRedactionOptions } from '../../utils/dialog-options';
import { ResizeOptions, ResizeRedactionData, ResizeRedactionOption, ResizeRedactionResult } from '../../utils/dialog-types';

@Component({
    templateUrl: './resize-redaction-dialog.component.html',
    styleUrls: ['./resize-redaction-dialog.component.scss'],
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TranslateModule,
        DetailsRadioComponent,
        MatFormField,
        MatSelectTrigger,
        MatSelect,
        MatOption,
        IconButtonComponent,
        CircleButtonComponent,
        HasScrollbarDirective,
        MatDialogClose,
        NgIf,
    ],
})
export class ResizeRedactionDialogComponent extends IqserDialogComponent<
    ResizeRedactionDialogComponent,
    ResizeRedactionData,
    ResizeRedactionResult
> {
    readonly #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
    readonly iconButtonTypes = IconButtonTypes;
    readonly options: DetailsRadioOption<ResizeRedactionOption>[];
    readonly dictionaries = inject(DictionariesMapService).get(this.#dossier.dossierTemplateId);
    readonly entity = this.dictionaries.find(d => d.type === this.data.redaction.type);
    readonly redaction = this.data.redaction;
    readonly form: FormGroup<{
        comment: FormControl<string>;
        dictionary: FormControl<string>;
        option: FormControl<DetailsRadioOption<ResizeRedactionOption>>;
    }>;

    constructor(private readonly _formBuilder: FormBuilder) {
        super();
        this.options = getResizeRedactionOptions(
            this.redaction,
            this.#dossier,
            false,
            this.#applyToAllDossiers,
            this.data.isApprover,
            this.data.permissions.canResizeInDictionary,
        );
        this.form = this.#getForm();
    }

    get dialogHeaderType() {
        return this.data.redaction.HINT ? 'hint' : this.data.redaction.isSkippedImageHint ? 'image' : 'redaction';
    }

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

    save() {
        const formValue = this.form.getRawValue();
        const updateDictionary = formValue.option?.value === ResizeOptions.IN_DOSSIER;

        super.close({
            comment: formValue.comment,
            updateDictionary,
            addToAllDossiers: !!formValue.option?.additionalCheck?.checked,
        });
    }

    #getForm() {
        return this._formBuilder.group({
            comment: [null],
            dictionary: new FormControl({ value: this.redaction.type, disabled: true }),
            option: this.options[0],
        });
    }
}
