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

@Component({
	selector: 'mflyProgressBar',
	template: require('./progress-bar.html'),
	transclude: true
})
export default class ProgressBar implements IComponentController {

	fillStyle: { width: string }

	@Input()
	percent: number

	$onChanges(changes) {
		if (changes.percent) {
			this.fillStyle = this.percentToFillStyle(changes.percent.currentValue)
		}
	}

	private percentToFillStyle(percent: number) {
		if (percent < 0) { percent = 0 }
		if (percent > 100) { percent = 100 }

		return { width: `${percent.toString()}%` }
	}
}