<template>
	<div>
		<VolumeHighIcon v-if="player.volume > 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeLowIcon v-if="player.volume > 0 && player.volume <= 0.3"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMediumIcon v-if="player.volume > 0.3 && player.volume <= 0.7"
			class="pointer"
			:size="30"
			@click="mute" />
		<VolumeMuteIcon v-if="player.volume === 0"
			class="pointer"
			:size="30"
			@click="$store.dispatch('player/volume', volumeMuted)" />
		<input max="1"
			min="0"
			step="0.1"
			type="range"
			:value="player.volume"
			@change="(event) => $store.dispatch('player/volume', event.target.value)">
	</div>
</template>

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

export default {
	name: 'Volume',
	components: {
		VolumeHighIcon,
		VolumeLowIcon,
		VolumeMediumIcon,
		VolumeMuteIcon,
	},
	data() {
		return {
			volumeMuted: 0,
		}
	},
	computed: {
		player() {
			return this.$store.state.player
		},
	},
	methods: {
		mute() {
			this.volumeMuted = this.player.volume
			this.$store.dispatch('player/volume', 0)
		},
	},
}
</script>

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

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

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