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

interface ProgressCircleArgs {
	progressState: number;
}

@Component
class ProgressCircleComponent extends TsxComponent<ProgressCircleArgs> implements ProgressCircleArgs {
	@Prop() progressState: number;

	render(h) {
		return (
			<div class="ko-progress-circle" data-progress={this.progressState}>
				<div class="ko-circle">
					<div class="full ko-progress-circle__slice">
						<div class="ko-progress-circle__fill"></div>
					</div>
					<div class="ko-progress-circle__slice">
						<div class="ko-progress-circle__fill"></div>
						<div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
					</div>
				</div>
				<div class="ko-progress-circle__overlay"></div>
			</div>
		);
	}
}

const ProgressCircle = toNative(ProgressCircleComponent);
export default ProgressCircle;