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

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

export default {
	name: 'Speed',
	components: {
		NcAppNavigationItem,
		NcCounterBubble,
		MinusIcon,
		PlusIcon,
		SpeedometerIcon,
		SpeedometerMediumIcon,
		SpeedometerSlowIcon,
	},
	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>
