import type { VNode } from 'vue';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import VueUtils from '../../common/utils/vue-utils';

interface CardHeaderArgs {
	title?: string | VNode;
	subtitle?: string;
	smallTitle?: string;
}

@Component
class CardHeaderComponent extends TsxComponent<CardHeaderArgs> implements CardHeaderArgs {
	@Prop() title!: string | VNode;
	@Prop() subtitle!: string;
	@Prop() smallTitle?: string;

	render(h) {
		const titleIsVnode = VueUtils.isVNode(this.title);

		return (
			<div class="card-header ">
				{this.smallTitle && <h6 class="card-small-title">{this.smallTitle}</h6>}
				{titleIsVnode && this.title
				&& <div class="card-title card-title-vnode">{this.title}</div>}

				{!titleIsVnode && this.title && (
					<h5 class="card-title">
						{this.title}

						{this.subtitle != null && this.subtitle.length > 0 && (
							<small class="description d-none d-md-inline">
								{' '}
								-
								{this.subtitle}
							</small>
						)}
					</h5>
				)}
			</div>
		);
	}
}

const CardHeader = toNative(CardHeaderComponent);
export default CardHeader;