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

interface FlexContainerArgs {
	cssClass?: string;
	fullWidthOnMobile?: boolean;
	verticalAlign?: 'unset' | 'top' | 'center' | 'bottom';
}

@Component
class FlexContainerComponent extends TsxComponent<FlexContainerArgs> implements FlexContainerArgs {
	@Prop() cssClass!: string;
	@Prop() fullWidthOnMobile!: boolean;
	@Prop() verticalAlign?: 'unset' | 'top' | 'center' | 'bottom';

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

	getFullWidthClass(): string {
		return this.fullWidthOnMobile != false ? ' frm-flex-mobilefw' : '';
	}

	getVerticalAlignClass(): string {
		if (this.verticalAlign == null || this.verticalAlign == 'unset') {
			return '';
		}

		return ` frm-item-alignment-${this.verticalAlign}`;
	}

	render(h) {
		return <div class={`frm-flex-container frm-item-flex${this.getCustomCssClass()}${this.getFullWidthClass()}${this.getVerticalAlignClass()}`}>{this.$slots.default?.()}</div>;
	}
}

const FlexContainer = toNative(FlexContainerComponent);
export default FlexContainer;