import { Component } from '@angular/core';
import { DetailsRadioOption, IconButtonTypes } from '@iqser/common-ui';
import { RemoveRedactionOption, RemoveRedactionOptions } from './remove-redaction-options';
import { FormBuilder, UntypedFormGroup } from '@angular/forms';
import { removeRedactionTranslations } from '@translations/remove-redaction-translations';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { Dossier } from '@red/domain';
import { IqserDialogComponent } from '../../../../../../../../libs/common-ui/src/lib/dialog/iqser-dialog-component.directive';
import { PermissionsService } from '@services/permissions.service';
import { tap } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const PIN_ICON = 'red:push-pin';
const FOLDER_ICON = 'red:folder';
const REMOVE_FROM_DICT_ICON = 'red:remove-from-dict';

export interface RemoveRedactionPermissions {
    canRemoveOrSuggestToRemoveOnlyHere: boolean;
    canRemoveOrSuggestToRemoveFromDictionary: boolean;
    canMarkAsFalsePositive: boolean;
}

export interface RemoveRedactionData {
    redaction: AnnotationWrapper;
    dossier: Dossier;
    falsePositiveContext: string;
    permissions: RemoveRedactionPermissions;
}

export interface RemoveRedactionResult {
    comment: string;
    option: DetailsRadioOption<RemoveRedactionOption>;
    applyToAllDossiers: boolean | null;
}

@Component({
    templateUrl: './remove-redaction-dialog.html',
    styleUrls: ['./remove-redaction-dialog.component.scss'],
})
export class RemoveRedactionDialogComponent extends IqserDialogComponent<
    RemoveRedactionDialogComponent,
    RemoveRedactionData,
    RemoveRedactionResult
> {
    readonly iconButtonTypes = IconButtonTypes;
    readonly options: DetailsRadioOption<RemoveRedactionOption>[];

    form!: UntypedFormGroup;

    readonly #redaction: AnnotationWrapper;
    readonly #permissions: RemoveRedactionPermissions;
    readonly #translations = removeRedactionTranslations;

    constructor(private readonly _formBuilder: FormBuilder, private readonly _permissionsService: PermissionsService) {
        super();
        this.#redaction = this.data.redaction;
        this.#permissions = this.data.permissions;
        this.options = this.#options();
        this.form = this.#getForm();

        this.form
            .get('option')
            .valueChanges.pipe(
                tap(() => {
                    this.options[1].extraOption.checked = true;
                    this.options[2].extraOption.checked = true;
                }),
                takeUntilDestroyed(),
            )
            .subscribe();
    }

    save(): void {
        this.dialogRef.close(this.form.getRawValue());
    }

    #getForm(): UntypedFormGroup {
        return this._formBuilder.group({
            comment: [null],
            option: [this.options[0]],
        });
    }

    #options() {
        const options: DetailsRadioOption<RemoveRedactionOption>[] = [];
        if (this.#permissions.canRemoveOrSuggestToRemoveOnlyHere) {
            options.push({
                label: this.#translations.ONLY_HERE.label,
                description: this.#translations.ONLY_HERE.description,
                descriptionParams: { value: this.#redaction.value },
                icon: PIN_ICON,
                value: RemoveRedactionOptions.ONLY_HERE,
            });
        }
        if (this.#permissions.canRemoveOrSuggestToRemoveFromDictionary) {
            options.push({
                label: this.#translations.IN_DOSSIER.label,
                description: this.#translations.IN_DOSSIER.description,
                descriptionParams: { value: this.#redaction.value },
                icon: FOLDER_ICON,
                value: RemoveRedactionOptions.IN_DOSSIER,
                extraOption: {
                    label: this.#translations.IN_DOSSIER.extraOptionLabel,
                    checked: true,
                },
            });
        }
        if (this.#permissions.canMarkAsFalsePositive) {
            options.push({
                label: this.#translations.FALSE_POSITIVE.label,
                description: this.#translations.FALSE_POSITIVE.description,
                descriptionParams: { value: this.#redaction.value, type: this.#redaction.type, context: this.data.falsePositiveContext },
                icon: REMOVE_FROM_DICT_ICON,
                value: RemoveRedactionOptions.FALSE_POSITIVE,
                extraOption: {
                    label: this.#translations.FALSE_POSITIVE.extraOptionLabel,
                    checked: true,
                },
            });
        }
        return options;
    }
}
