import { Prop, toNative } from 'vue-facing-decorator';
import ProgressCircle from '.';
import TsxComponent, { Component } from '../../app/vuetsx';
import { PortalUtils } from '../../common/utils/utils';

interface FakeProgressCircleArgs {
	isComplete: boolean;
}

@Component
class FakeProgressCircleComponent extends TsxComponent<FakeProgressCircleArgs> implements FakeProgressCircleArgs {
	@Prop() isComplete: boolean;
	currentProgress: number = 0;
	_timer: any = null;

	mounted() {

	}

	resetState() {
		this.killAll();
		this.currentProgress = 0;
	}

	start() {
		this.currentProgress = PortalUtils.randomNumber(7, 22);
		this.makeNextLoop.call(this);
	}

	setProgressComplete() {
		this.killAll();
	}

	makeNextLoop() {
		this._timer = setTimeout(() => {
			if (this.currentProgress > 70) {
				this.currentProgress += PortalUtils.randomNumber(1, 3);
			} else {
				this.currentProgress += PortalUtils.randomNumber(2, 5);
			}

			this.makeNextLoop();
		}, PortalUtils.randomNumber(1500, 3900));
	}

	killAll() {
		this.currentProgress = 98;
		try {
			clearTimeout(this._timer);
		} catch (error) { }

		this._timer = null;
	}

	render(h) {
		if (this.isComplete) {
			this.killAll();
		}

		return (
			<ProgressCircle progressState={this.currentProgress} />
		);
	}
}

const FakeProgressCircle = toNative(FakeProgressCircleComponent);
export default FakeProgressCircle;