<script setup>
import {useAuthStore} from "../../Stores/auth.js";
import {NSelect, NFlex, NText} from 'naive-ui'
import {computed} from "vue";
import {router, useForm} from "@inertiajs/vue3";

const authStore = useAuthStore()
const userOptions = computed(() => {
    return authStore.availableRoles.map(itm => {
        return {
            label: itm.name,
            value: itm.role_id
        }
    })
})

const formRole = useForm({
    role_id: authStore.user.role.role_id
})
const onChangeRole = (roleId) => {
    console.log(roleId)
    formRole.post('/user/role/change', {
        onSuccess: () => {
            router.visit(window.location.pathname, {
                preserveScroll: true,
                preserveState: false, // Это важно - сбрасывает состояние
                only: ['user', 'auth'], // Указываем какие данные обновить
            })
        }
    })
}

const themeOverride = {
    border: null,
    borderHover: null,
    borderPressed: null,
    borderFocus: null,
    paddingMedium: null,
    rippleColor: null
}
</script>

<template>
    <NFlex align="center" :wrap="false">
        <div class="min-w-[220px]">
            <NSelect :options="userOptions"
                     v-model:value="formRole.role_id"
                     @update:value="value => onChangeRole(value)"
            />
        </div>
        <div>
            {{ authStore.user?.name }}
        </div>
    </NFlex>
<!--    <NDropdown :options="userOptions" placement="bottom-end">-->
<!--        <NButton :theme-overrides="themeOverride">-->
<!--            {{ authStore.user?.name }}-->
<!--        </NButton>-->
<!--    </NDropdown>-->
</template>

<style scoped>

</style>
