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

<script lang="ts">
import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
import { mapActions, mapState } from 'pinia'
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'
import { t } from '@nextcloud/l10n'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'Speed',
	components: {
		NcAppNavigationItem,
		NcCounterBubble,
		MinusIcon,
		PlusIcon,
		SpeedometerIcon,
		SpeedometerMediumIcon,
		SpeedometerSlowIcon,
	},
	computed: {
		...mapState(usePlayer, ['rate']),
	},
	methods: {
		...mapActions(usePlayer, ['setRate']),
		t,
		changeRate(diff: number) {
			const newRate = parseFloat((this.rate + diff).toPrecision(2))
			this.setRate(newRate > 0 ? newRate : this.rate)
		},
	},
}
</script>

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

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

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