import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import './loading-indicator.css';

interface LoadingIndicatorArgs {
	visible: boolean;
	cssClass?: string;
	displayDelay?: number
	ensureMinHeight?: boolean
}

export class LoadingIndicatorConfig {
	static defaultShowDelay = 0
}

@Component
class LoadingIndicatorComponent extends TsxComponent<LoadingIndicatorArgs> implements LoadingIndicatorArgs {
	@Prop() visible: boolean;
	@Prop() cssClass: string;
	@Prop() displayDelay?: number
	@Prop() ensureMinHeight?: boolean
	isVisible: boolean = null;

	mounted() {
		this.handleVisibleSync();
	}

	updated() {
		this.handleVisibleSync();
	}

	handleVisibleSync() {
		if (this.visible !== this.isVisible) {
			if (this.visible) {
				const delay = this.getDelay();
				if (delay > 0) {
					setTimeout(() => {
						if (this.visible) {
							this.isVisible = true;
						}
					}, delay);
				} else {
					this.isVisible = true;
				}
			} else {
				this.isVisible = false;
			}
		}
	}

	getDelay(): number {
		return this.displayDelay ?? LoadingIndicatorConfig.defaultShowDelay;
	}

	render(h) {
		if (this.isVisible) {
			if (this.ensureMinHeight) {
				return (<div style="min-height:150px;position:relative">
					{this.renderBlocker(h)}
				</div>)
			} else {
				return this.renderBlocker(h);
			}
		} else {
			return null;
		}
	}

	renderBlocker(h) {
		return (
			<div class={`${this.cssClass || 'holdon-white'} holdon-overlay holdon-element`} role="status" aria-live="polite">
				<div class="holdon-content">
					<div class="sk-rect">
						<div class="rect1"></div>
						<div class="rect2"></div>
						<div class="rect3"></div>
						<div class="rect4"></div>
						<div class="rect5"></div>
					</div>
					<span class="sr-only">Loading...</span>
				</div>
			</div>
		);
	}
}

const LoadingIndicator = toNative(LoadingIndicatorComponent);
export default LoadingIndicator;