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

const Sider = (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 selectedKeys = []
        let openKeys = []
        const lastSelectedKeys = localStorage.getItem('zhongding_selected_sider')
        if (lastSelectedKeys) {
            selectedKeys = JSON.parse(lastSelectedKeys)
        }
        const lastOpenKeys = localStorage.getItem('zhongding_open_sider')
        if (lastOpenKeys) {
            openKeys = JSON.parse(lastOpenKeys)
        }
        if (!selectedKeys.length && !openKeys.length) {
            let firstItem = items[0] || null

            if (firstItem) {
                let children = firstItem.props.children
                if (Array.isArray(children)) {
                    selectedKeys = [children[0].key]
                    openKeys = [firstItem.key]
                } else if (children.key) {
                    selectedKeys = [children.key]
                    openKeys = [firstItem.key]
                } else {
                    selectedKeys = [firstItem.key]
                }
            }
        }
        localStorage.setItem('zhongding_selected_sider', JSON.stringify(selectedKeys))
        setSelectedKeys(selectedKeys)
        localStorage.setItem('zhongding_open_sider', JSON.stringify(openKeys))
        setOpenKeys(openKeys)
    }, [])


    return (
        <Menu id="sider" mode="inline"
            theme={'dark'}
            selectedKeys={selectedKeys}
            openKeys={openKeys}
            onSelect={(e) => {
                const { selectedKeys } = e;
                setSelectedKeys(selectedKeys)
                localStorage.setItem('zhongding_selected_sider', JSON.stringify(selectedKeys))
            }}
            onOpenChange={(openKeys) => {
                setOpenKeys(openKeys)
                localStorage.setItem('zhongding_open_sider', JSON.stringify(openKeys))
            }}
        >
            {items}
        </Menu>
    )
}

export default Sider;