import { Component, inject, OnInit } 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';

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

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

    public ngOnInit(): void {
        this.imageForm.patchValue({
            filename: this.imageView.filename,
            alt: this.imageView.alt,
            caption: this.imageView.alt,
        });
    }

    public async onSubmit(event: SubmitEvent): Promise<void> {
        event.preventDefault();
        await this.imageService.updateImage(this.imageView.owner.username, this.imageView.filename, {
            alt: this.imageForm.value.alt,
            caption: this.imageForm.value.caption,
        });
        this.dialogRef.close();
    }
}