{{#if width && widthPercent}}
<div class="svelte-progress-bar {{barClass}}" style="width: {{widthPercent}}%; {{barColorStyle}}">
	{{#if running}}
	<div class="svelte-progress-bar-leader" style="{{leaderColorStyle}}"></div>
	{{/if}}
</div>
{{/if}}

<script>
function getIncrement(number) {
	if (number >= 0 && number < 0.2) return 0.1
	else if (number >= 0.2 && number < 0.5) return 0.04
	else if (number >= 0.5 && number < 0.8) return 0.02
	else if (number >= 0.8 && number < 0.99) return 0.005
	return 0
}

let updater

export default {
	data() {
		return {
			minimum: 0.08,
			maximum: 0.994,
			settleTime: 700,
			intervalTime: 700,
			stepSizes: [ 0, 0.005, 0.01, 0.02 ]
		}
	},
	methods: {
		start() {
			this.reset()
			this.continue()
		},
		reset() {
			const startingWidth = this.get('minimum')
			this.set({
				width: startingWidth,
				running: true
			})
		},
		continue() {
			const maximumWidth = this.get('maximum')
			const intervalTime = this.get('intervalTime')

			if (updater) {
				// prevent multiple intervals by clearing before making
				clearInterval(updater)
			}
			this.set({ running: true })
			updater = setInterval(() => {
				let value = this.get('width')

				const stepSizes = this.get('stepSizes')
				const randomStep = stepSizes[Math.floor(Math.random() * stepSizes.length)]
				const step = getIncrement(value) + randomStep
				if (value < maximumWidth) {
					value = value + step
				}
				if (value > maximumWidth) {
					value = maximumWidth
					this.stop()
				}
				this.set({ width: value })
			}, intervalTime)
		},
		stop() {
			if (updater) {
				clearInterval(updater)
			}
		},
		complete() {
			clearInterval(updater)
			this.set({
				width: 1,
				running: false
			})
			const settleTime = this.get('settleTime')
			setTimeout(() => {
				this.set({
					completed: true
				})
				setTimeout(() => {
					this.set({
						completed: false,
						width: 0
					})
				}, settleTime)
			}, settleTime)
		}
	},
	computed: {
		widthPercent(width) {
			return width * 100 || undefined
		},
		barClass(completed) {
			return completed ? 'svelte-progress-bar-hiding' : ''
		},
		barColorStyle(color) {
			return color && `background-color: ${color};` || ''
		},
		leaderColorStyle(color) {
			// the box shadow of the leader bar uses `color` to set its shadow color
			return color && `background-color: ${color}; color: ${color};` || ''
		}
	}
}
</script>

<style>
.svelte-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	transition: width 0.16s ease-in-out;
	z-index: 1;
}
.svelte-progress-bar-hiding {
	transition: top 0.16s ease;
	top: -8px;
}
.svelte-progress-bar-leader {
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 100px;
	transform: rotate(2.5deg) translate(0px, -4px);
	box-shadow: 0 0 8px;
	z-index: 2;
}
</style>