<template>
	<div>
		<VolumeHigh v-if="volume > 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeLow v-if="volume > 0 && volume <= 0.3"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMedium v-if="volume > 0.3 && volume <= 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMute v-if="volume == 0"
			class="pointer"
			:size="30"
			@click="unmute" />
		<input max="1"
			min="0"
			step="0.1"
			type="range"
			:value="volume"
			@change="(event) => audio.volume = event.target.value">
	</div>
</template>

<script>
import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
import VolumeLow from 'vue-material-design-icons/VolumeLow.vue'
import VolumeMedium from 'vue-material-design-icons/VolumeMedium.vue'
import VolumeMute from 'vue-material-design-icons/VolumeMute.vue'

export default {
	name: 'Volume',
	components: {
		VolumeHigh,
		VolumeLow,
		VolumeMedium,
		VolumeMute,
	},
	props: {
		volume: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {
			volumeMuted: 0,
		}
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
	},
	methods: {
		mute() {
			this.volumeMuted = this.audio.volume
			this.audio.volume = 0
		},
		unmute() {
			this.audio.volume = this.volumeMuted
		},
	},
}
</script>

<style scoped>
    div {
        align-items: center;
		display: flex;
		gap: 5px;
		justify-content: center;
    }

	input {
		transform: rotate(270deg);
		width: 4rem;
	}

	.pointer {
		cursor: pointer;
	}
</style>
