<script setup>
import { ref } from "vue";

const props = defineProps({
    item: {
        type: null,
        required: true,
    },
});

const isDropdownOpen = ref(false);

const toggleDropdown = () => {
    isDropdownOpen.value = !isDropdownOpen.value;
};
</script>

<template>
    <li class="nav-link" :class="{ disabled: item.disabled, open: isDropdownOpen }">
        <Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href"
            @click.prevent="item.children && toggleDropdown()">
            <VIcon :icon="item.icon" class="nav-item-icon" />
            <span class="nav-item-title">{{ item.title }}</span>
            <VIcon v-if="item.children" :icon="isDropdownOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                class="dropdown-icon" />
        </Component>

        <transition name="dropdown-transition">
            <ul v-if="item.children && isDropdownOpen" class="dropdown-menu1">
                <li v-for="(child, index) in item.children" :key="index">
                    <VerticalNavLink :item="child">
                        <template #default="{ item }">
                            <VIcon :icon="item.icon" class="nav-item-icon" />
                            <span class="nav-item-title">{{ item.title }}</span>
                        </template>
                    </VerticalNavLink>
                </li>
            </ul>
        </transition>
    </li>
</template>

<style lang="scss">
.layout-vertical-nav {
    .nav-link a {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .nav-link {
        color: rgb(var(--v-theme-yellow-theme-button)) !important;
    }

    .dropdown-menu1 {
        padding-left: 1rem;
        overflow: hidden;
    }

    .dropdown-icon {
        margin-left: auto;
        transition: transform 0.3s ease-in-out;
    }

    .nav-link.open .dropdown-icon {
        transform: rotate(180deg);
    }
}

.dropdown-transition-enter-active,
.dropdown-transition-leave-active {
    transition: max-height 0.3s ease-in-out;
    max-height: 200px;
    /* Adjust this value based on the maximum height of your dropdown menu */
    overflow: hidden;
}

.dropdown-transition-enter-from,
.dropdown-transition-leave-to {
    max-height: 0;
}
</style>
