import React, { Component } from 'react'
import { Menu } from 'antd'
import AntIcon from 'components/ant-icon'
import store from 'store'

const { getState, subscribe } = store

export default class index extends Component {
    state = {
        ...getState('nav'),
    }

    constructor(props) {
        super(props)

        this.unsubscribe = subscribe('nav', state => {
            this.setState(state)
        })
    }

    componentDidMount() {
        window.openContentWindowByMenuName = this.onOpenContentWindowByMenuName
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

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

    renderSubMenu = menu => {
        return (
            <Menu.SubMenu
                key={menu.id}
                title={menu.meta.title}
                icon={menu.meta.icon && <AntIcon type={menu.meta.icon} />}
            >
                {this.renderMenu(menu.children)}
            </Menu.SubMenu>
        )
    }

    renderMenuItem = menu => {
        return (
            <Menu.Item key={menu.id} onClick={() => this.onOpenContentWindow(menu)}>
                {menu.meta.icon && <AntIcon type={menu.meta.icon} />}
                <span>{menu.meta.title}</span>
            </Menu.Item>
        )
    }

    onOpenContentWindowByMenuName = (name, param) => {
        for (const item of this.state.nav) {
            for (const menu of item.menu) {
                if (menu.name === name) {
                    this.onOpenContentWindow(menu, param)
                    return
                }
                if (menu.children) {
                    for (const child of menu.children) {
                        if (child.name === name) {
                            this.onOpenContentWindow(child, param)
                            return
                        }
                    }
                }
            }
        }
    }

    onOpenContentWindow = (menu, param) => {
        const { id, meta, component, link, redirect, openType } = menu

        window.openContentWindow({
            key: id,
            title: meta.title,
            icon: meta.icon,
            path: (() => {
                switch (openType) {
                    case 1:
                        return component
                    case 2:
                        return link
                    case 3:
                        return redirect
                    default:
                        return null
                }
            })(),
            openType,
            param,
        })
    }

    onMenuOpenChange = () => {
        this.props.parent.updateSwiper()
    }

    render() {
        const props = {
            mode: 'inline',
            selectable: false,
            style: this.props.menuStyle,
            theme: 'light',
        }

        const on = {
            onOpenChange: this.onMenuOpenChange,
        }

        return (
            <>
                {this.state.nav.map((item, i) => {
                    if (item.menu.length) {
                        return (
                            <section key={i}>
                                <div className="yo-sider-nav--app">{item.app.name}</div>
                                <Menu {...props} {...on}>
                                    {this.renderMenu(item.menu)}
                                </Menu>
                            </section>
                        )
                    } else {
                        return false
                    }
                })}
            </>
        )
    }
}
