import { HmacMD5 } from "crypto-js"

export default {
    props: {
        nav: {
            default() {
                return {
                    content: []
                }
            },
            type: Object,
        },
        menuStyle: {
            default() {
                return {}
            },
            type: Object || String,
        },
        mode: {
            default: 'inline',
            type: String,
        },
    },

    methods: {
        renderMenu(menu) {
            return menu.map((p) => {
                return p.children ? this.renderSubMenu(p) : this.renderMenuItem(p)
            })
        },

        renderSubMenu(menu) {
            return (
                <a-sub-menu key={menu.id}>
                    <span slot="title">
                        {menu.meta.icon && <a-icon type={menu.meta.icon} />}
                        <span>{menu.meta.title}</span>
                    </span>
                    {this.renderMenu(menu.children)}
                </a-sub-menu>
            )
        },

        renderMenuItem(menu) {
            return (
                <a-menu-item key={menu.id} onClick={() => this.onOpenContentWindow(menu)}>
                    {menu.meta.icon && <a-icon type={menu.meta.icon} />}
                    <span>{menu.meta.title}</span>
                </a-menu-item>
            )
        },

        onMenuOpenChange() {
            this.$emit('openChange')
        },

        onOpenContentWindow(menu) {
            this.openContentWindow({
                key: menu.id,
                title: menu.meta.title,
                icon: menu.meta.icon,
                path: menu.component,
            })
        },
    },

    render() {
        const props = {
            mode: this.mode,
            selectable: false,
            style: this.menuStyle,
            theme: this.$root.global.settings.navTheme,
        }

        const on = {
            openChange: this.onMenuOpenChange,
        }

        return (<section>
            {
                this.nav.content.map(item => {
                    return (
                        <section>
                            <div class="yo-sider-nav--app">{item.app.name}</div>
                            <a-menu {...{ props, on }}>{this.renderMenu(item.menu)}</a-menu>
                        </section>
                    )
                })
            }
        </section>)
    },
}