import React, { Component, useEffect, useState } from 'react';
import { Menu } from 'antd';

const Sider = props => {
    const { themeName } = props
    const [items, setItems] = useState([])
    const [selectedKeys, setSelectedKeys] = useState([])
    const [openKeys, setOpenKeys] = useState([])

    useEffect(() => {
        const { sections, dispatch, user } = props;
        let items = sections.reduce((p, c) => {
            if (typeof c.getNavItem == 'function') {
                let item = c.getNavItem(user, dispatch);
                if (item != null) {
                    if (Array.isArray(item)) {
                        p = p.concat(item);
                    } else {
                        p.push(item);
                    }
                }
            }
            return p;
        }, []);
        setItems(items)
        let firstItem = items[0] || null
        if (firstItem) {
            let children = firstItem.props.children
            if (Array.isArray(children)) {
                setSelectedKeys([children[0].key])
                setOpenKeys([firstItem.key])
            } else if (children.key) {
                setSelectedKeys([children.key])
                setOpenKeys([firstItem.key])
            } else {
                setSelectedKeys([firstItem.key])
            }
        }
    }, [])


    return (
        <Menu id="sider" mode="inline"
            theme={themeName || 'dark'}
            selectedKeys={selectedKeys}
            openKeys={openKeys}
            onSelect={(e) => {
                const { selectedKeys } = e;
                setSelectedKeys(selectedKeys)
            }}
            onOpenChange={(ks) => {
                setOpenKeys(ks)
            }}
        >
            {items}
        </Menu>
    )
}

export default Sider;