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 FlexFormItemArgs {
	cssClass?: string;
	width?: number | string;
	flexFill?: boolean;
	flexGrow?: boolean;
}

@Component
class FlexFormItemComponent extends TsxComponent<FlexFormItemArgs> implements FlexFormItemArgs {
	@Prop() cssClass!: string;
	@Prop() width!: number | string;
	@Prop() flexFill!: boolean;
	@Prop() flexGrow!: boolean;

	getFlexFillCssClass(): string {
		return (this.flexFill != false ? ' frm-flex-childfill' : ' frm-flex-childnofill')
			+ (this.flexGrow != false ? '' : ' frm-flex-child-nogrow');
	}

	getCustomCssClass(): string {
		return !isNullOrEmpty(this.cssClass) ? ` ${this.cssClass}` : '';
	}

	getWidthStyleLiteral(): string {
		return (this.width != null ? `width:${this.width}${PortalUtils.isNumber(this.width) ? 'px' : ''}` : '');
	}

	render(h) {
		return (
			<div class={`frm-flex-child${this.getFlexFillCssClass()}${this.getCustomCssClass()}`} style={this.getWidthStyleLiteral()}>
				{this.$slots.default?.()}
			</div>
		);
	}
}

const FlexFormItem = toNative(FlexFormItemComponent);
export default FlexFormItem;