<script setup lang="ts">
import { usePage, router } from "@inertiajs/vue3";
import { SharedProps } from "@/Types/types";

const props = withDefaults(
    defineProps<{
        redirectRoute: string;
        routeParams?: Record<string, string | number>;
        placeholder?: string;
    }>(),
    {
        routeParams: () => ({}),
    }
);

const page = usePage<SharedProps>().props;
const following = [...page.auth?.following ?? [], page.auth?.user?.name]
    .filter((x, i, a) => a.indexOf(x) === i);

function onUpdate(user: string) {
    if (!user) return;

    router.get(
        route(props.redirectRoute, {
            user,
            ...props.routeParams,
        })
    );
}
</script>

<template>

    <VSelect
        v-if="following.length > 1"
        :placeholder="placeholder"
        variant="outlined"
        density="comfortable"
        :items="following"
        @update:model-value="onUpdate"
    >
    </VSelect>
</template>

<style scoped>
</style>
