import type { ValidationState } from './../../common/static-wrappers/interfaces/validation-interface';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import './css/fieldset.css';

interface FieldsetArgs {
	caption: string;
	cssClass?: string;
	equalHeight?: boolean;
	validationState?: ValidationState;
	bottomMargin?: boolean;
	pulsate?: boolean;
	customValidationMessage?: ((item) => string) | string;
	isCollapsedByDefault?: boolean;
	disableCollapsing?: boolean;
}

@Component
class FieldsetComponent extends TsxComponent<FieldsetArgs> implements FieldsetArgs {
	@Prop() caption!: string;
	@Prop() cssClass!: string;
	@Prop() equalHeight!: boolean;
	@Prop() bottomMargin?: boolean;
	@Prop() pulsate?: boolean;
	@Prop() customValidationMessage: (() => string) | string;
	@Prop() isCollapsedByDefault: boolean;
	@Prop() disableCollapsing?: boolean;

	isCollapsed: boolean = false;
	slotsMaxHeight = 10000;

	getErrorCssClass(): string {
		return this.hasValidationError ? ' has-danger' : '';
	}

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

	getPulsatingCssClass(): string {
		return (this.pulsate == true ? ' btn-pulsating' : '');
	}

	getEqualHeightCssClass(): string {
		return this.equalHeight == true ? ' fieldset-equal-height' : '';
	}

	getNoBottomMarginCssClass(): string {
		return this.bottomMargin == false ? ' fieldset-no-bottom-margin' : '';
	}

	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;
	}

	mounted() {
		if (this.disableCollapsing != true) {
			this.isCollapsed = this.isCollapsedByDefault === true;
		}
	}

	render(h) {
		return (
			<div class={`fieldset-control${this.getErrorCssClass()}${this.getCustomCssClass()}${this.getEqualHeightCssClass()}${this.getNoBottomMarginCssClass()}${this.getPulsatingCssClass()}`}>
				<div
					class="fieldset-legend"
					onClick={() => {
						if (this.disableCollapsing != true) {
							this.isCollapsed = !this.isCollapsed;
						}
					}}
				>
					{this.caption}
					{' '}
					<div class={`fieldset-legend-arrow ${this.isCollapsed ? 'fieldset-legend-arrow-collapsed' : ''}`}>►</div>
				</div>
				<div class={`fieldset-slots ${this.isCollapsed ? 'fieldset-slots-collapsed' : ''}`}>{this.$slots.default?.()}</div>

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

				<div style="clear:both;"></div>
			</div>
		);
	}
}

const Fieldset = toNative(FieldsetComponent);
export default Fieldset;