/* eslint-disable no-new */
import type { VNode } from 'vue';
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';

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

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

@Component
class DropdownButtonItemComponent extends TsxComponent<DropdownButtonItemArgs> implements DropdownButtonItemArgs {
	@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;
	@Prop() tooltip!: string;

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

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

		if (!isNullOrEmpty(this.tooltip)) {
			document.querySelector('body > .tooltip')?.remove();
		}

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

	getHref(): string {
		if (!isNullOrEmpty(this.href) && this.disabled != true) {
			return this.href;
		} else {
			return 'javascript:';
		}
	}

	getHrefTarget(): string {
		if (this.hrefBlank == true && this.disabled != true) {
			return '_blank';
		}

		return null;
	}

	get useRouterLink(): boolean {
		return !isNullOrEmpty(this.href)
			&& this.hrefBlank != true
			&& this.disabled != true
			&& this.href.startsWith('/');
	}

	get itemCssClass(): string {
		return `dropdown-item${this.isSelected ? ' dropdown-selectable-section' : ''}${this.disabled == true ? ' disabled ' : ''}`;
	}

	renderContent() {
		return [
			!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>
			),
			<span>{this.text}</span>,
			this.isSelected && <i class="fas fa-check"></i>,
		];
	}

	render(h) {
		if (this.useRouterLink) {
			return (
				<router-link
					class={this.itemCssClass}
					to={this.href}
					title={this.tooltip}
					onClick={() => this.raiseClickEvent()}
				>
					{this.renderContent()}
				</router-link>
			);
		}

		return (
			<a
				class={this.itemCssClass}
				href={this.getHref()}
				target={this.getHrefTarget()}
				title={this.tooltip}
				onClick={() => this.raiseClickEvent()}
			>
				{this.renderContent()}
			</a>
		);
	}
}

const DropdownButtonItem = toNative(DropdownButtonItemComponent);
export default DropdownButtonItem;