import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import axios from 'axios';
import { PhotoFormModel } from './photo';

@Component({
	selector: 'upload-image-form',
	imports: [FormsModule],
	templateUrl: './upload-image-form.html',
	styleUrl: './upload-image-form.scss',
})
export class UploadImageForm {
	@Output() close = new EventEmitter<void>();

	photo = new PhotoFormModel();

	selectedFile: File | null = null;

	cancelUpload() {
		this.close.emit();
	}

	uploadImage() {
		if (this.selectedFile) {
			const formData = new FormData();
			formData.append('image', this.selectedFile);
			formData.append('title', this.photo.imageTitle);
			formData.append('description', this.photo.imageDescription);
			formData.append('tags', this.photo.imageTags);
			formData.append('people', this.photo.imagePeople);
			// Here you would typically send the formData to your backend API

			axios
				.post('https://localhost:7273/api/photo', formData, {
					headers: {},
					validateStatus: (status) => status == 201,
				})
				.then((response) => {
					console.log('Upload successful:', response.data);
				})
				.catch((error) => {
					console.error('Upload failed:', error);
				});

			this.close.emit();
		}
	}

	thumbnailUrl: string | null = null;
	onImageSelected(event: Event): void {
		const input = event.target as HTMLInputElement;
		if (input.files && input.files.length > 0) {
			this.selectedFile = input.files[0];
			console.log('Selected image:', this.selectedFile);
			this.thumbnailUrl = URL.createObjectURL(this.selectedFile);
		}
	}
}