import { Component, Input } from '../decorators'


@Component({
	selector: 'mflyProgressCircle',
	template: require('./progress-circle.html'),
})
export default class MflyProgressCircleController {

	@Input() percent: number

	protected rotationStyle = { transform: `rotate(0deg)` }

	// Takes a number on 0-100 scale (will clamp outliers).
	// Returns a style object containing a CSS rotation transform.
	percentToRotationStyle (percent) {
		let arc = percent * 3.6

		if (arc < 0) { arc = 0 }
		if (arc > 360) { arc = 360 }

		return { transform: `rotate(${arc}deg)` }
	}

	$onChanges (changes) {
		if (changes.percent) {
			this.rotationStyle = this.percentToRotationStyle(changes.percent.currentValue)
		}
	}
}