import {Component, EventEmitter, inject, Output} from '@angular/core';
import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle
} from '@angular/material/dialog';
import {MatButton} from '@angular/material/button';
import {MatListItem, MatNavList} from '@angular/material/list';
import {RouterLink} from '@angular/router';
import {FileInfo} from '../../../models/file-info';
import {UserApiService} from '../user-api.service';

@Component({
  selector: 'app-dialog-select-image.component',
  imports: [
    MatDialogContent,
    MatDialogTitle,
    MatButton,
    MatDialogActions,
    MatDialogClose,

    MatListItem,
    MatNavList,

  ],
  templateUrl: './dialog-select-image.component.html',
  styleUrl: './dialog-select-image.component.scss'
})
export class DialogSelectImageComponent {
  fileInfos?: FileInfo[] = [];

  @Output() uploadClicked = new EventEmitter<any>();
  @Output() selectClicked = new EventEmitter<any>();

  readonly dialogRef = inject(MatDialogRef<DialogSelectImageComponent>);

  constructor(private userApiService: UserApiService) {
    this.userApiService.getImages().subscribe(data => {
      this.fileInfos = data;
      console.log(data);
    });
  }
  upload() {

    this.uploadClicked.emit();

  }

  onNoClick() {
    this.dialogRef.close();
  }

  select(fileInfo:FileInfo) {
    this.selectClicked.emit(fileInfo);
  }
}