import { Component, inject, OnInit, signal } from '@angular/core';
import { DialogContainer } from '../../../../../../shared/components/dialog-container/dialog-container';
import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ImageView } from '../../../../../../shared/models/ImageView.model';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatButton } from '@angular/material/button';
import { ImageService } from '../../../../../../shared/services/ImageService';
import { notNullOrUndefined } from '../../../../../../shared/util';
import { Spinner } from '../../../../../../shared/components/spinner/spinner';

@Component({
    selector: 'app-edit-image-dialog',
    imports: [DialogContainer, MatFormField, MatLabel, MatInput, ReactiveFormsModule, MatButton, Spinner],
    templateUrl: './edit-image-dialog.html',
    styleUrl: './edit-image-dialog.css',
})
export class EditImageDialog implements OnInit {
    private readonly usernameFilename: [username: string, filename: string] = inject(MAT_DIALOG_DATA);
    private readonly dialogRef = inject(MatDialogRef);
    private readonly imageService = inject(ImageService);

    protected readonly loading = signal(false);
    protected readonly loadError = signal<Error | null>(null);
    protected readonly imageView = signal<ImageView | null>(null);

    protected readonly submitting = signal(false);
    protected readonly submitError = signal<Error | null>(null);

    protected readonly imageForm = new FormGroup({
        filename: new FormControl(
            {
                value: '',
                disabled: true,
            },
            Validators.required,
        ),
        alt: new FormControl(''),
        caption: new FormControl(''),
    });

    public ngOnInit(): void {
        this.loading.set(true);
        this.imageService.getImageView2(this.usernameFilename[0], this.usernameFilename[1]).subscribe({
            next: (imageView) => {
                this.loading.set(false); // shouldn't need this
                this.imageView.set(imageView);
                this.imageForm.patchValue({
                    filename: imageView.filename,
                    alt: imageView.alt,
                    caption: imageView.caption,
                });
            },
            error: (e) => {
                this.loading.set(false);
                this.loadError.set(e);
            },
        });
    }

    protected async onSubmit(event: SubmitEvent): Promise<void> {
        event.preventDefault();
        const imageView = this.imageView()!;
        const formValue = this.imageForm.value;
        if (notNullOrUndefined(formValue.alt)) {
            imageView.alt = formValue.alt;
        }
        if (notNullOrUndefined(formValue.caption)) {
            imageView.caption = formValue.caption;
        }
        this.submitting.set(true);
        this.imageService.updateImage(imageView.owner.username, imageView.filename, imageView).subscribe({
            next: (imageView) => {
                this.submitting.set(false);
                this.imageView.set(imageView);
                this.dialogRef.close();
            },
            error: (e) => {
                this.submitting.set(false);
                this.submitError.set(e);
            },
        });
    }
}