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

interface DataTableUpperButtonsWrapperArgs {
	hasCheckbox?: boolean;
	cssClass?: string;
}

@Component
class DataTableUpperButtonsWrapperComponent extends TsxComponent<DataTableUpperButtonsWrapperArgs> implements DataTableUpperButtonsWrapperArgs {
	@Prop() hasCheckbox?: boolean;
	@Prop() cssClass?: string;

	private getCssClass(): string {
		let builder = 'table-upper-buttons-wrap';
		if (this.hasCheckbox) {
			builder += ' wrap-has-checkbox';
		}

		if (!isNullOrEmpty(this.cssClass)) {
			builder += ` ${this.cssClass}`;
		}

		return builder;
	}

	private render(h) {
		if (PortalUtils.isIOS()) {
			return (
				<div class={`ios-table-upper-buttons-wrap${this.hasCheckbox ? ' wrap-has-checkbox' : ''}`}>
					<div class={this.getCssClass()}>{this.$slots.default?.()}</div>
				</div>
			);
		} else {
			return <div class={this.getCssClass()}>{this.$slots.default?.()}</div>;
		}
	}
}

const DataTableUpperButtonsWrapper = toNative(DataTableUpperButtonsWrapperComponent);
export default DataTableUpperButtonsWrapper;