import { Component, Inject } from '@angular/core';
import { ReactiveFormsModule, Validators } from '@angular/forms';
import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
import { BaseDialogComponent, CircleButtonComponent, getConfig, IconButtonComponent, IqserHelpModeModule } from '@iqser/common-ui';
import { TranslateModule } from '@ngx-translate/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { NgForOf, NgIf } from '@angular/common';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

export interface AddEditFileAttributeDialogData {
    readonly fileAttribute: IFileAttributeConfig;
    readonly dossierTemplateId: string;
    readonly numberOfDisplayedAttrs: number;
    readonly numberOfFilterableAttrs: number;
}

@Component({
    templateUrl: './add-edit-file-attribute-dialog.component.html',
    styleUrls: ['./add-edit-file-attribute-dialog.component.scss'],
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TranslateModule,
        MatFormFieldModule,
        MatSelectModule,
        NgForOf,
        MatSlideToggleModule,
        MatCheckboxModule,
        MatTooltipModule,
        IconButtonComponent,
        CircleButtonComponent,
        IqserHelpModeModule,
        NgIf,
    ],
})
export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
    readonly config = getConfig();
    readonly DISPLAYED_FILTERABLE_LIMIT = 3;
    readonly translations = fileAttributeTypesTranslations;
    readonly fileAttribute = this.data.fileAttribute;
    readonly dossierTemplateId: string = this.data.dossierTemplateId;
    readonly typeOptions = Object.keys(FileAttributeConfigTypes);
    readonly canSetDisplayed!: boolean;
    readonly canSetFilterable!: boolean;
    readonly titleTranslateParams = {
        type: this.data.fileAttribute ? 'edit' : 'create',
        name: this.data.fileAttribute?.label,
    };

    constructor(
        protected readonly _dialogRef: MatDialogRef<AddEditFileAttributeDialogComponent, IFileAttributeConfig>,
        @Inject(MAT_DIALOG_DATA) readonly data: AddEditFileAttributeDialogData,
    ) {
        super(_dialogRef, !!data.fileAttribute);
        this.canSetDisplayed = data.numberOfDisplayedAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.displayedInFileList;
        this.canSetFilterable = data.numberOfFilterableAttrs < this.DISPLAYED_FILTERABLE_LIMIT || data.fileAttribute?.filterable;
        this.form = this._getForm(this.fileAttribute);
        this.initialFormValue = this.form.getRawValue();
    }

    save() {
        const fileAttribute: IFileAttributeConfig = {
            id: this.fileAttribute?.id,
            editable: !this.form.get('readonly').value,
            ...this.form.getRawValue(),
        };
        this._dialogRef.close(fileAttribute);
    }

    private _getForm(fileAttribute: IFileAttributeConfig) {
        return this._formBuilder.group({
            label: [fileAttribute?.label, Validators.required],
            csvColumnHeader: [fileAttribute?.csvColumnHeader],
            type: [fileAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
            readonly: [fileAttribute ? !fileAttribute.editable : false],
            primaryAttribute: [fileAttribute?.primaryAttribute],
            filterable: { value: fileAttribute?.filterable, disabled: !this.canSetFilterable },
            displayedInFileList: { value: fileAttribute?.displayedInFileList, disabled: !this.canSetDisplayed },
        });
    }
}
