import { Component, effect, inject, Input, output } from '@angular/core';
import { AuthService } from '@app/core/services/authentication/auth.service';
import { NgClass } from '@angular/common';
import { environment } from '@env/environment';
import { ToastrService } from 'ngx-toastr';
import { ProjectViewModel } from '@app/ui/projects/project.presenter.model';
import { ProjectFacade } from '@app/ui/projects/project.facade';
import { ActionType } from '@app/domain/action-type.util';

@Component({
  selector: 'app-project-picture-form',
  standalone: true,
  imports: [NgClass],
  templateUrl: './project-picture-form.component.html',
  styleUrl: './project-picture-form.component.scss',
})
export class ProjectPictureFormComponent {
  @Input({ required: true }) project: ProjectViewModel | undefined = undefined;

  onFormSubmitted = output<any>();
  private readonly toastrService = inject(ToastrService);

  private readonly projectFacade = new ProjectFacade();
  protected readonly loading = this.projectFacade.loading;
  protected readonly error = this.projectFacade.error;

  private readonly authService = inject(AuthService);

  file: File | null = null; // Variable to store file
  imagePreviewUrl: string | null = null; // URL for image preview

  constructor() {
    effect(() => {
      if (!this.loading().isLoading) {
        switch (this.loading().action) {
          case ActionType.UPDATE:
            this.authService.updateUser();

            this.toastrService.success(
              `L'aperçu du projet ${this.project!.nom} ont bien été modifier !`,
              `Mise à jour`,
              {
                closeButton: true,
                progressAnimation: 'decreasing',
                progressBar: true,
              }
            );

            this.onFormSubmitted.emit('');
            break;
        }
      }
    });
  }

  onSubmit() {
    if (this.file != null) {
      const formData = new FormData();
      formData.append('fichier', this.file); // "fichier" est le nom du champ dans PocketBase

      this.projectFacade.update(this.project?.id!, formData);
    }
  }

  onPictureChange($event: Event) {
    const target: HTMLInputElement = $event.target as HTMLInputElement;
    if (target?.files?.[0]) {
      this.file = target.files[0];
      this.readFile(this.file);
    }
  }

  private readFile(file: File) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.imagePreviewUrl = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }

  protected readonly environment = environment;
}