import React from 'react';
import styles from "./index.css";
import Box from "../../components/Box/index.jsx";
import {Scroll} from '../../components/Animation/index';
import Edit from '../edit/index';
export class NavMenu extends React.Component {
    state = {
        config: {
            data: {
                list: []
            }
        }
    }
    componentWillReceiveProps(props) {
        const {config} = this.state, {
                data = config
            } = props;
        JSON.stringify(data) != JSON.stringify(config) && this.setState({config: data});
    }
    render() {
        const {
                children,
                className,
                style,
                index: activeIndex,
                noEdit = false,
                ...oth
            } = this.props, {
                config,
                config: {
                    data: {
                        list = []
                    }
                }
			} = this.state,isArray = Array.isArray(children);
        return (
            <div className={`${styles.NavMenu} ${className}`} style={style}>
                {/* {!!noEdit || <Edit style={{bottom:"auto"}} data={config} updata={config => this.setState({config})}></Edit>} */}
                <Edit style={{bottom:"auto",top:"-65px",height:"80px"}} data={config} updata={config => this.setState({config})}></Edit>
                <Box no={true} className={styles.NavMenuBox}>
                    <Scroll {...oth} index={activeIndex} className={styles.NavMenuList}>
                        {!!isArray || !!list.length && list.map((x, i) => {
                            if(children){
                                const {className,style:_style,...oth} = children.props;
                                return(<div
                                    key={i}
                                    style={_style}
                                    className={`${styles.item} ${activeIndex == i
                                        ? styles.active
                                        : ''}`}
                                    onClick={e => this
                                    .props
                                    .active(i)}>
                                        {React.cloneElement(children,{
                                            ...oth,
                                            item:x,
                                            className:`iconfont ${x.icon} ${className}`
                                        })}
                                </div>)
                            }else{
								return (
									<div
										key={i}
										className={`iconfont ${x.icon} ${styles.item} ${activeIndex == i
											? styles.active
											: ''}`}
										onClick={e => this
										.props
										.active(i)}>{x.name}</div>
								)
                            }
                        })}
						{!!isArray && React.Children.map(children,child=>{
									const {className,...oth} = child.props;
									return React.cloneElement(child,{
                                        ...oth,
                                        item:{},
										className:`${styles.item} ${className}`
									});
								})}
                    </Scroll>
                </Box>
            </div>
        )
    }
}
export default NavMenu;