<template>
    <nav class="panel-toolbar">
        <ul>
            <li v-for="(item, i) in menu" :key="i">
                <router-link :to="item.url" v-if="i < 7 || user.profile.confirmToSales">
                    <Button v-bind="getBind(item)" @click="toFloat(i)" />
                </router-link>
            </li>
        </ul>
        <span ref="selector" />
        <Button v-bind="logoutBtn.props" @click="logout()" />
    </nav>
</template>

<script setup>
import init from '../../initialize/panelToolbar.js'
const { menu, logoutBtn, getBind, floating } = init()

const route = useRoute()
const selector = ref()

const { dialog } = inject('service')
const logout = () => dialog.show(resolveComponent('PanelDialogLogout'))

const toFloat = (index = menu.findIndex((item) => item.url == route.path)) => {
    try {
        floating(menu, selector, index ??= 7)
    } catch (error) {

    }
}
const user = useUserStore()
user.get()

watch(() => route.path, () => toFloat())
onMounted(() => toFloat())
</script>

<style lang="scss">
.panel-toolbar {
    @apply w-full container bg-[#FAFAFA] rounded-[0.6rem] border-2 border-[#E5E5E5];
    @apply flex flex-wrap items-center justify-between mx-auto px-2 xl:px-4 2xl:px-6 xl:py-2 2xl:py-4 relative mt-10;

    ul {
        @apply flex xl:gap-4 2xl:gap-[1.1rem] overflow-hidden;

        li {
            button {
                @apply h-10 py-1.5 justify-end overflow-visible whitespace-nowrap px-3 xl:px-3.5 2xl:px-4;

                .p-button-icon {
                    @apply text-[#7F7F7F] lg:text-lg xl:text-xl 2xl:text-2xl 2xl:ml-2;
                }

                .p-button-label {
                    @apply text-[#7F7F7F] lg:text-sm xl:text-base 2xl:text-lg font-medium font-vazir grow-0;
                }

                &[active] * {
                    @apply text-primary-600;
                }
            }
        }
    }

    &>button {
        @apply h-10 xl:h-12 2xl:h-[3.7rem] bg-[#F2F2F2] hover:bg-[#eaeaea] active:bg-[#d8d8d8] px-3 xl:px-4 2xl:px-5 mr-auto #{!important};

        .p-button-icon {
            @apply text-[#AD3434] lg:text-base xl:text-lg 2xl:text-2xl xl:ml-4;
        }

        .p-button-label {
            @apply text-[#AD3434] lg:text-sm xl:text-base 2xl:text-lg font-medium font-vazir grow-0;
        }
    }

    &>span {
        @apply content-['_'] right-6 h-1 rounded-full bg-primary-600 absolute -bottom-[0.2rem];
        @apply transition-['right'] duration-200;
    }
}
</style>
