<script lang="tsx">
import { defineComponent, computed, PropType, CSSProperties } from 'vue'
import { useVModels } from '@vueuse/core'
import { useSkyConfiger } from '../../../hooks/hook-configer'
import * as env from '../../../types/instance.resolver'

export default defineComponent({
    name: 'SkyNavbar',
    emits: ['selecter'],
    props: {
        collapsed: { type: Boolean, default: false },
        defaultActive: { type: String },
        dataSource: { type: Array as PropType<Array<env.NavbarItemOption>>, default: () => [] },
        navbarHeight: { type: String, default: '42px' },
        iconSize: { type: Number, default: 16 }
    },
    setup(props, { emit, slots }) {
        const { state } = useSkyConfiger()
        const { defaultActive } = useVModels(props, emit)
        const navbarCSSProperties = computed<CSSProperties>(() => ({
            userSelect: 'none',
            [`--${state.namespace}-menu-item-height`]: props.navbarHeight,
            [`--${state.namespace}-menu-sub-item-height`]: props.navbarHeight,
            [`--${state.namespace}-menu-border-color`]: 'transparent'
        }))

        return () => (
            <el-menu
                router
                unique-opened
                collapse={props.collapsed}
                default-active={defaultActive.value}
                onSelect={(key: string) => emit('selecter', key)}
                popper-class="skyline-popper-navbar"
                style={navbarCSSProperties.value}
            >
                {props.dataSource.map(item => {
                    return slots.default ? (
                        slots.default(item)
                    ) : (
                        <sky-navbar-item node={item} icon-size={props.iconSize}>
                            {slots}
                        </sky-navbar-item>
                    )
                })}
            </el-menu>
        )
    }
})
</script>

<style>
.skyline-popper-navbar {
    --el-sky-menu-item-height: 42px;
    --el-sky-menu-sub-item-height: 42px;
}
</style>
