<script setup lang="ts">
import { Icon } from '@iconify/vue'
import type { RouteLocationNormalized } from 'vue-router'
import { updateUrlParameter } from '~/components/util/route'

const props = defineProps<Props>();
const route = useRoute()
const currentEpisode = computed(() => Number(route.query.episode as string))
</script>

<script lang="ts">
function changeEpisode(route: RouteLocationNormalized, props: Props, currentEpisode: number) {
    let episodeOffset = 0
    if (props.type == EpisodeChangeType.NEXT) {
        episodeOffset = 1
    }
    if (props.type == EpisodeChangeType.PREVIOUS) {
        episodeOffset = -1
    }
    updateUrlParameter(route, 'episode', String(currentEpisode + episodeOffset))
}

interface Props {
    type: EpisodeChangeType;
}

export enum EpisodeChangeType {
    NEXT = "mage:next-fill",
    PREVIOUS = "mage:previous-fill",
}
</script>

<template>
    <UiButton v-on:click="changeEpisode(route, props, currentEpisode)" variant="borderless" size="icon">
        <Icon :icon="props.type" class="size-5" />
    </UiButton>
</template>
