import type { VNode } from 'vue';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';

export interface DropdownButtonElementArgs {
	icon?: string;
	img?: ImageObj;
	text?: string | VNode;
	href?: string;
	disabled?: boolean;
	hrefBlank?: boolean;
	clicked?: () => void;
	isSelected?: boolean;
	emptySpace?: boolean;
}

export interface ImageObj {
	class?: string;
	src: string;
	text?: string;
}

@Component
class DropdownButtonElementComponent extends TsxComponent<DropdownButtonElementArgs> implements DropdownButtonElementArgs {
	@Prop() icon!: string;
	@Prop() img!: ImageObj;
	@Prop() text!: string | VNode;
	@Prop() href!: string;
	@Prop() disabled!: boolean;
	@Prop() hrefBlank!: boolean;
	@Prop() isSelected!: boolean;
	@Prop() clicked?: () => void;
	@Prop() emptySpace!: boolean;

	raiseClickEvent() {
		if (this.disabled == true) {
			return;
		}

		if (this.clicked != null) {
			this.clicked();
		}
	}

	render(h) {
		return (
			<div class={`dropdown-item${this.isSelected ? ' dropdown-selectable-section' : ''}${this.disabled == true ? ' disabled ' : ''}`} onClick={() => this.raiseClickEvent()}>
				{!isNullOrEmpty(this.icon)
				&& (
					<span class="dd-btn-icon">
						<span class="dd-btn-icon-wrap">
							<i class={this.icon}></i>
						</span>
						{this.emptySpace != false
						&& <span>&nbsp;&nbsp;</span>}
					</span>
				)}
				{this.img != null
				&& (
					<span>
						<img class={this.img.class} src={this.img.src} />
						{this.emptySpace != false && <span>&nbsp;&nbsp;</span>}
						{this.img.text}
					</span>
				)}

				{this.text != null
				&& <span>{this.text}</span>}

				{this.isSelected
				&& <i class="fas fa-check"></i>}

				{this.$slots.default}
			</div>
		);
	}
}

const DropdownButtonElement = toNative(DropdownButtonElementComponent);
export default DropdownButtonElement;