import { computed, Directive, input } from '@angular/core';
import { ClassValue } from 'clsx';
import { cn } from './utils';

@Directive({
	selector: '[appWithBackgroundImage]',
	standalone: true,
	host: {
		'[class]': 'computedClass()',
		'[style.background-image]': 'backgroundStyle()',
	},
})
export class WithBackgroundImageDirective {
	class = input<ClassValue>('');
	background = input.required<string | string[]>({ alias: 'appWithBackgroundImage' });
	computedClass = computed(() => cn('bg-cover bg-center bg-no-repeat', this.class()));
	backgroundStyle = computed(() => {
		const background = this.background();
		if (Array.isArray(background)) {
			return background.map((image) => this.getBackgroundUrl(image)).join(', ');
		}
		return this.getBackgroundUrl(background);
	});
	private getBackgroundUrl(image: string) {
		return `url('assets/images/backgrounds/${image}.png')`;
	}
}