import type { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';

export interface ValidationResultDisplayerArgs {
	validationState?: ValidationState;
	customValidationMessage?: ((item) => string) | string;
}

@Component
class ValidationResultDisplayerComponent extends TsxComponent<ValidationResultDisplayerArgs> implements ValidationResultDisplayerArgs {
	@Prop() customValidationMessage: (() => string) | string;

	getValidationErrorMessage(): string {
		if (this.customValidationMessage != null) {
			if (this.customValidationMessage.length && this.customValidationMessage.length == 0) {
				return this.validationErrorMessage;
			} else {
				return (this.customValidationMessage as any)(this);
			}
		}

		return this.validationErrorMessage;
	}

	render(h) {
		if (!this.hasValidationError) {
			return null;
		}

		return <div class="invalid-feedback">{this.getValidationErrorMessage()}</div>;
	}
}

const ValidationResultDisplayer = toNative(ValidationResultDisplayerComponent);
export default ValidationResultDisplayer;