import React from 'react';
import PropTypes from "prop-types";
require('./index.css');

const initOrderList = CONFIG.normalMenuList.map(t=>{
    return Object.assign({},t,{active:false})
});

export default class AllClassifyContainer extends React.Component{
    constructor(props){
        super(props);
        this.changeOrder = this.changeOrder.bind(this);
        this.state = {
            orderList : initOrderList.slice(),
            timer : null,
            time : 500
        }
    }

    showPage(){

    }

    changeOrder(key){
        let orderList = this.state.orderList.map((t,k)=>{
            return {
                text : t.text,
                active : k===key,
                page : t.page ? t.page : 0
            }
        });
        this.setState({
            orderList : orderList
        },()=>{
            this.state.timer = window.setTimeout( ()=> {
                window.clearTimeout(this.state.timer);
                let page = this.state.orderList[key].page ? this.state.orderList[key].page : 0;
                this.context.toggleOrders(page);
            },this.state.time);

        })
    }

    componentWillUnmount(){
        this.setState({
            orderList : initOrderList.slice()
        })
    }

    render(){
        return(
            <div className={"allClassify " + (this.props.showClassify ? '':'hide')}>
                <ul>
                    {
                        this.state.orderList.map((t,i)=>{
                            return (
                                <li key={"allClassify"+i} className={t.active ? 'active' : ''} onClick={()=>this.changeOrder(i)}>
                                    <div>
                                        <img src={
                                            t.active ? require(`./images/${i}-.png`) : require(`./images/${i}.png`)
                                        } alt="" className={"img"}/>
                                        <div className={"text"}>{t.text}</div>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}


AllClassifyContainer.contextTypes = {
    toggleOrders: PropTypes.func
};