/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/** Angular Imports */
import { Component, inject } from '@angular/core';
import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

/**
 * Upload image dialog component.
 */
@Component({
  selector: 'mifosx-upload-image-dialog',
  templateUrl: './upload-image-dialog.component.html',
  styleUrls: ['./upload-image-dialog.component.scss'],
  imports: [
    ...STANDALONE_SHARED_IMPORTS,
    MatDialogTitle,
    FileUploadComponent,
    MatDialogActions,
    MatDialogClose
  ]
})
export class UploadImageDialogComponent {
  dialogRef = inject<MatDialogRef<UploadImageDialogComponent>>(MatDialogRef);

  /** Client Image */
  image: File;

  /**
   * Data URL of the selected image, rendered as a preview so the officer sees what they picked
   * before confirming — the upload replaces the client's profile picture immediately on confirm,
   * and picking the wrong file is otherwise only discovered once it is already live.
   */
  imagePreview: string | null = null;

  /** Set when the picked file is not a readable image, in place of a preview. */
  previewError = '';

  /**
   * Sets file form control value.
   * @param {any} $event file change event.
   */
  onFileSelect($event: any) {
    if ($event.target.files.length > 0) {
      this.image = $event.target.files[0];
      this.buildPreview(this.image);
    }
  }

  /** Reads the picked file into a data URL for the preview. */
  private buildPreview(file: File) {
    this.imagePreview = null;
    this.previewError = '';

    // The picker's accept filter is a hint the OS dialog can be talked out of, so re-check here
    // rather than handing a non-image to FileReader and rendering a broken <img>.
    if (!file.type?.startsWith('image/')) {
      this.previewError = 'Selected file is not an image. Choose a PNG or JPEG file.';
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result as string;
    };
    reader.onerror = () => {
      this.previewError = 'Could not read the selected file.';
    };
    reader.readAsDataURL(file);
  }
}