<template>
    <ul v-if="menuItems.length > 0" class="slide-menu">
        <li class="panel sidetab-menu">
            <div class="panel-body tabs-menu-body p-0 border-0">
                <div class="tab-content">
                    <div class="tab-pane tab-content-show">
                        <ul class="sidemenu-list">
                            <li v-for="(menu, index) in menuItems" :key="'submenu-' + index" :class="[
                                menu.Childs != null && menu.Childs.length > 0 ? 'sub-slide' : '',
                                { 'is-expanded': expandedSubMenus[index] }
                            ]">
                                <a href="javascript:void(0);" v-if="menu.Childs != null && menu.Childs.length > 0"
                                    class="slide-item" @click="toggleSubMenu(index)">
                                    <span class="">{{ menu.Label }}</span>
                                    <i class="sub-angle fe fe-chevron-down"></i>
                                </a>

                                <router-link class="slide-item" v-if="menu.Childs == null || menu.Childs.length == 0"
                                    :to="menu.Url == '' ? '/' : '/' + menu.Url">
                                    {{ menu.Label }}
                                </router-link>

                                <ul class="sub-slide-menu" v-if="menu.Childs != null && menu.Childs.length > 0">
                                    <li v-for="child in menu.Childs" :key="'child-' + child.Id">
                                        <router-link class="sub-side-menu__item"
                                            :to="child.Url == '' ? '/' : '/' + child.Url">
                                            {{ child.Label }}
                                        </router-link>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps(['menuItems', 'expandedSubMenus']);
const emit = defineEmits(['toggle-sub-menu']);

function toggleSubMenu(index) {
    emit('toggle-sub-menu', index);
}

</script>

<style scoped>
/* Mobile responsive styles */
@media (max-width: 991px) {
    .slide-menu {
        max-height: 0;
        overflow: hidden;
        padding-inline-start: 10px;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }

    .slide.is-expanded .slide-menu {
        max-height: 500px;
        opacity: 1;
    }

    .sub-slide-menu {
        max-height: 0;
        overflow: hidden;
        padding-inline-start: 10px;
        margin-top: 5px;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }

    .sub-slide.is-expanded .sub-slide-menu {
        max-height: 300px;
        opacity: 1;
    }

    .slide-item {
        padding: 8px 10px !important;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sub-side-menu__item {
        padding: 6px 10px !important;
        font-size: 12px;
        display: block;
    }

    .sub-angle {
        transition: transform 0.3s ease-in-out;
        transform-origin: center;
    }

    .sub-slide.is-expanded .sub-angle {
        transform: rotate(180deg);
    }
}

/* Ensure clickable elements */
.slide-item {
    cursor: pointer;
    user-select: none;
}

/* Smooth transitions */
.sub-slide-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
</style>