import { Component, inject, Input, output } from '@angular/core'
import { AnyType } from '@core/types'
import { DefaultService } from '@api-client/angular'
import { LoadingImageDirective, startWithTap } from '@frontend/shared'
import { CreateHotToastRef, HotToastService } from '@ngxpert/hot-toast'
import { map, Observable, of, tap } from 'rxjs'
import { I18nService } from '../../../core'
import { LucideFileUp, LucideImages } from '@lucide/angular'

export type FileData = string | ArrayBuffer | null | undefined

@Component({
	selector: 'kadi-image-upload',
	templateUrl: './image-upload.component.html',
	imports: [LoadingImageDirective, LucideFileUp, LucideImages],
})
export class ImageUploadComponent {
	@Input() imageUrl: string | undefined

	readonly uploaded = output<{
		file: File
		data: FileData
	}>()

	file: File | undefined
	fileData: FileData

	private readonly _toast = inject(HotToastService)
	private readonly _i18nService = inject(I18nService)
	private readonly _apiService = inject(DefaultService)

	onFileSelected(event: Event): void {
		this.file = (event.target as AnyType).files?.[0]
		if (!this.file) return

		const reader = new FileReader()
		reader.addEventListener('load', () => {
			this.fileData = reader.result
			this.uploaded.emit({ file: this.file as File, data: this.fileData })
		})
		reader.readAsDataURL(this.file)
	}

	reset(): void {
		this.file = this.fileData = undefined
	}

	upload(message?: string): Observable<string | undefined> {
		if (!this.file) return of(undefined)

		let toastRef: CreateHotToastRef<unknown>
		return this._apiService.storageControllerUploadFile(this.file).pipe(
			startWithTap(() => {
				toastRef = this._toast.loading(message ?? this._i18nService.translate('upload_image_loading'))
			}),
			tap(() => toastRef.close()),
			map((res) => res.url),
		)
	}
}