import React from 'react';
import { Menu , Icon } from 'antd';

const {Item: MenuItem , SubMenu} = Menu;

export function CommonSiderMenuComponent(props) {
    let {
        list = [] ,
        jump ,
        defaultSelectedKeys ,
        defaultOpenKeys ,
        openKeys ,
        selectedKeys ,
        onOpenChange
    } = props;
    return (
        <Menu
            className="common-siderMenu"
            mode="inline"
            onClick={jump}
            defaultSelectedKeys={defaultSelectedKeys}
            defaultOpenKeys={defaultOpenKeys}
            openKeys={openKeys}
            selectedKeys={selectedKeys}
            onOpenChange={onOpenChange}
        >
            {list.map(item => {
                const {children , url , icon , name} = item;
                const nameElement = <span>{name}</span>;
                let iconElement = null;

                if (icon) {
                    iconElement = <Icon type={icon} />;
                }

                if (!children || !children.length) {
                    return (
                        <MenuItem key={url} data-url={url}>
                            {iconElement}
                            {nameElement}
                        </MenuItem>
                    );
                }
                return (
                    <SubMenu
                        key={url}
                        title={
                            <>
                                {iconElement}
                                {nameElement}
                            </>
                        }
                    >
                        {children.map(childItem => {
                            const {url , name} = childItem;
                            return (
                                <MenuItem key={url} data-url={url}>
                                    <span>{name}</span>
                                </MenuItem>
                            );
                        })}
                    </SubMenu>
                );
            })}
        </Menu>
    );
}