console.clear()
const { createMachine, interpret, assign } = XState

const playToggle = document.querySelector('#playToggle') // <button>
const audio = document.querySelector('audio') // <audio>
const currentTime = document.querySelector('#currentTime') // <time>
const durationTime = document.querySelector('#durationTime') // <time>
const scrubber = document.querySelector('#scrubber') // <input type=range>
const progress = document.querySelector('#progress') // <progress>

const machine = createMachine({
	initial: 'paused',
	context: {
		currentTime: 0, // (s)
		durationTime: 0, // (s)
	},
	on: {
		durationchange: {
			actions: [
				assign({
					durationTime: (context, event) => event.target.duration
				}),
				'renderDurationTime'
			]
		},
		timeupdate: {
			actions: [
				assign({
					currentTime: (context, event) => event.target.currentTime
				}),
				'renderCurrentTime',
				'updateScrubber'
			]
		},
		SCRUB: {
			actions: [
				assign({
					currentTime: (context, event) => event.value * context.durationTime
				}),
				'updateAudioCurrentTime',
				'renderCurrentTime',
				'updateScrubber'
			]
		},
		seeked: {
			actions: [
				assign({
					currentTime: (context, event) => event.target.currentTime
				}),
				'renderCurrentTime',
				'updateScrubber'
			]
		}
	},
	states: {
		paused: {
			on: {
				TOGGLE_PLAY: {
					target: 'playing',
					actions: ['playAudio']
				},
			}
		},
		playing: {
			on: {
				TOGGLE_PLAY: {
					target: 'paused',
					actions: ['pauseAudio']
				},
			}
		}
	}
}, {
	actions: {
		playAudio: () => {
			audio.play()
			playToggle.dataset.state = 'playing'
		},
		pauseAudio: () => {
			audio.pause()
			playToggle.dataset.state = 'paused'
		},
		updateAudioCurrentTime: (context, event) => {
			audio.currentTime = context.currentTime
		},
		renderCurrentTime: (context) => {
			currentTime.innerText = formatDuration(context.currentTime)
		},
		renderDurationTime: (context) => {
			durationTime.innerText = formatDuration(context.durationTime)
		},
		updateScrubber: (context) => {
			// update position of the <input type="range"> element
			scrubber.value = context.currentTime / context.durationTime
			// update position of the <progress> element
			progress.value = context.currentTime / context.durationTime
		}
	}
})

function formatDuration(duration) {
	function formatTime(int, options) {
		const leadingZero = options && options.leadingZero
		return Math.floor(int).toString().padStart(leadingZero ? 2 : 0, '0')
	}
	
	const hours = Math.floor(duration / 60 / 60)
	const minutes = (duration - (hours * 60 * 60)) / 60
	const seconds = duration % 60
	
	return [
		formatTime(hours),
		formatTime(minutes, { leadingZero: true }),
		formatTime(seconds, { leadingZero: true })
	].join(':')
}

const service = interpret(machine).start()

playToggle.addEventListener('click', event => {
	service.send({ type: 'TOGGLE_PLAY' })
})

audio.addEventListener('timeupdate', service.send)
audio.addEventListener('durationchange', service.send)
// audio.addEventListener('seeked', service.send)

scrubber.addEventListener('input', event => {
	service.send({
		type: 'SCRUB',
		value: parseFloat(event.target.value)
	})
})