import { Tooltip } from 'bootstrap';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import { AlertLayout } from './alert-layout';

interface AlertArgs {
	cssClass?: string;
	layout?: AlertLayout;
	tooltip?: string;
}

@Component
class AlertComponent extends TsxComponent<AlertArgs> implements AlertArgs {
	@Prop() cssClass!: string;
	@Prop() layout!: AlertLayout;
	@Prop() tooltip!: string;

	getCssClass(): string {
		return (
			this.getParsedLayout()
			+ (this.cssClass != null ? ` ${this.cssClass}` : '')
		);
	}

	getParsedLayout() {
		return this.layout ?? AlertLayout.Primary;
	}

	mounted() {
		if (!isNullOrEmpty(this.tooltip)) {
			new Tooltip(this.$el);
		}
	}

	render(h) {
		return (
			<div class={this.getCssClass()} role="alert">
				{this.$slots.default?.()}
			</div>
		);
	}
}

const Alert = toNative(AlertComponent);
export default Alert;