import { Component, OnInit } from '@angular/core';
import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
import { FileAttributeEncodingTypes, IComponentMapping } from '@red/domain';
import { FormBuilder, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialogModule } from '@angular/material/dialog';
import { MatOption } from '@angular/material/autocomplete';
import { MatSelect, MatSelectTrigger } from '@angular/material/select';
import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
import { firstValueFrom } from 'rxjs';
import { ComponentMappingsService } from '@services/entity-services/component-mappings.service';

interface DialogData {
    dossierTemplateId: string;
    mapping: IComponentMapping;
}
interface DialogResult {
    id: string;
    name: string;
    file: Blob;
    encoding: string;
    delimiter: string;
}

@Component({
    templateUrl: './add-edit-component-mapping-dialog.component.html',
    styleUrls: ['./add-edit-component-mapping-dialog.component.scss'],
    standalone: true,
    imports: [
        TranslateModule,
        ReactiveFormsModule,
        NgIf,
        MatFormFieldModule,
        NgForOf,
        CircleButtonComponent,
        MatDialogModule,
        MatOption,
        MatSelectTrigger,
        MatSelect,
        IconButtonComponent,
        UploadFileComponent,
    ],
})
export class AddEditComponentMappingDialogComponent
    extends IqserDialogComponent<AddEditComponentMappingDialogComponent, DialogData, DialogResult>
    implements OnInit
{
    protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
    protected readonly translations = fileAttributeEncodingTypesTranslations;
    activeFile: File;
    form!: UntypedFormGroup;

    constructor(
        private readonly _formBuilder: FormBuilder,
        private readonly _componentMappingService: ComponentMappingsService,
    ) {
        super();
        this.form = this.#getForm();
    }

    async ngOnInit() {
        if (this.data.mapping?.fileName) {
            this.activeFile = { name: this.data.mapping.fileName } as File;
            const file = await firstValueFrom(
                this._componentMappingService.getComponentMappingFile(this.data.dossierTemplateId, this.data.mapping.id),
            );
            this.form.get('file').setValue(file);
            this.initialFormValue = this.form.getRawValue();
        }
    }

    fileChanged(file: Blob) {
        this.form.get('file').setValue(file);
    }

    save() {
        this.dialogRef.close({ ...this.data.mapping, ...this.form.getRawValue() });
    }

    #getForm(): UntypedFormGroup {
        return this._formBuilder.group({
            name: [this.data?.mapping?.name, Validators.required],
            file: [null, Validators.required],
            encoding: this.encodingTypeOptions.find(e => e === this.data?.mapping?.encoding) ?? this.encodingTypeOptions[0],
            delimiter: [this.data?.mapping?.delimiter ?? ',', Validators.required],
        });
    }
}
