<template>
	<NcAppNavigationItem :name="t('repod', 'Playback speed')">
		<template #extra>
			<div class="extra">
				<Minus class="pointer" :size="20" @click="changeRate(-.1)" />
				<NcCounterBubble class="counter">
					x{{ player.rate }}
				</NcCounterBubble>
				<Plus class="pointer" :size="20" @click="changeRate(.1)" />
			</div>
		</template>
		<template #icon>
			<SpeedometerSlow v-if="player.rate < 1" :size="20" />
			<SpeedometerMedium v-if="player.rate === 1" :size="20" />
			<Speedometer v-if="player.rate > 1" :size="20" />
		</template>
	</NcAppNavigationItem>
</template>

<script>
import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
import Minus from 'vue-material-design-icons/Minus.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import Speedometer from 'vue-material-design-icons/Speedometer.vue'
import SpeedometerMedium from 'vue-material-design-icons/SpeedometerMedium.vue'
import SpeedometerSlow from 'vue-material-design-icons/SpeedometerSlow.vue'

export default {
	name: 'Speed',
	components: {
		NcAppNavigationItem,
		NcCounterBubble,
		Minus,
		Plus,
		Speedometer,
		SpeedometerMedium,
		SpeedometerSlow,
	},
	computed: {
		player() {
			return this.$store.state.player
		},
	},
	methods: {
		changeRate(diff) {
			const newRate = (this.player.rate + diff).toPrecision(2)
			this.$store.dispatch('player/rate', newRate > 0 ? newRate : this.player.rate)
		},
	},
}
</script>

<style scoped>
	.counter {
		height: 20px;
	}

	.extra {
		align-items: center;
        display: flex;
        gap: .5rem;
    }

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