/**
 * @file CascaderListItem component
 * @author wendy(wendy.wei@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import List from '../List';

import Valid from '../_vendors/Valid';

export default class CascaderListItem extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.formatData = ::this.formatData;
        this.changeHandle = ::this.changeHandle;

    }

    formatData(data) {

        if (!data || data.length < 1) {
            return data;
        }

        return data.map(item => {
            if (item.children && item.children.length > 0) {
                item.rightIconCls = 'fa fa-angle-right';
            }
            return item;
        });

    }

    changeHandle(value, index) {

        if (!value) {
            return;
        }

        const {onChange} = this.props,
            currDepth = this.props.currDepth || 0;

        let path = this.props.path.slice(0, currDepth + 1);
        path[currDepth] = {
            node: value,
            index
        };

        onChange && onChange(path);

    }

    render() {

        const {listWidth, data, valueField, displayField, path, depth} = this.props,

            currDepth = this.props.currDepth || 0,
            activatedNode = currDepth in path ? data[path[currDepth].index] : null,
            hasChildren = activatedNode && activatedNode.children && activatedNode.children.length > 0,

            listStyle = currDepth === 0 ?
                {width: listWidth * Valid.range(depth, 1)}
                :
                null,

            popupListClassName = (currDepth === 0 ? ' first' : '') + (currDepth === depth - 1 ? ' last' : ''),
            popupListStyle = {
                width: listWidth,
                zIndex: 99 - currDepth
            };

        return (
            <div className="cascader-list-item"
                 style={listStyle}>

                <List className={'cascader-popup-list' + popupListClassName}
                      style={popupListStyle}
                      data={this.formatData(data)}
                      value={activatedNode}
                      valueField={valueField}
                      displayField={displayField}
                      onChange={this.changeHandle}/>

                {
                    hasChildren ?
                        <CascaderListItem {...this.props}
                                          data={activatedNode.children}
                                          currDepth={currDepth + 1}/>
                        :
                        null
                }

            </div>
        );

    }
}

CascaderListItem.propTypes = {

    /**
     * The width of CascaderListItem.
     */
    listWidth: PropTypes.number,

    /**
     * The data of cascader-list.
     */
    data: PropTypes.array,

    /**
     *
     */
    path: PropTypes.arrayOf(PropTypes.shape({

        /**
         *
         */
        node: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),

        /**
         *
         */
        index: PropTypes.number

    })),

    /**
     * The value field name in data. (default: "value")
     */
    valueField: PropTypes.string,

    /**
     * The display field name in data. (default: "text")
     */
    displayField: PropTypes.string,

    /**
     * The current depth.
     */
    currDepth: PropTypes.number,

    /**
     *
     */
    depth: PropTypes.number

};

CascaderListItem.defaultProps = {

    listWidth: 200,

    data: [],

    path: [],

    valueField: 'value',
    displayField: 'text',

    currDepth: 0,
    depth: 0

};
@@ -281,24 +281,1192 @@
 omponent %7B%0A%0A
+    static propTypes = %7B%0A%0A        /**%0A         * The width of CascaderListItem.%0A         */%0A        listWidth: PropTypes.number,%0A%0A        /**%0A         * The data of cascader-list.%0A         */%0A        data: PropTypes.array,%0A%0A        /**%0A         *%0A         */%0A        path: PropTypes.arrayOf(PropTypes.shape(%7B%0A%0A            /**%0A             *%0A             */%0A            node: PropTypes.oneOfType(%5BPropTypes.object, PropTypes.string, PropTypes.number%5D),%0A%0A            /**%0A             *%0A             */%0A            index: PropTypes.number%0A%0A        %7D)),%0A%0A        /**%0A         * The value field name in data. (default: %22value%22)%0A         */%0A        valueField: PropTypes.string,%0A%0A        /**%0A         * The display field name in data. (default: %22text%22)%0A         */%0A        displayField: PropTypes.string,%0A%0A        /**%0A         * The current depth.%0A         */%0A        currDepth: PropTypes.number,%0A%0A        /**%0A         *%0A         */%0A        depth: PropTypes.number%0A%0A    %7D;%0A%0A    static defaultProps = %7B%0A%0A        listWidth: 200,%0A%0A        data: %5B%5D,%0A%0A        path: %5B%5D,%0A%0A        valueField: 'value',%0A        displayField: 'text',%0A%0A        currDepth: 0,%0A        depth: 0%0A%0A    %7D;%0A%0A
     construc
@@ -3858,1000 +3858,4 @@
  %7D%0A%7D
-%0A%0ACascaderListItem.propTypes = %7B%0A%0A    /**%0A     * The width of CascaderListItem.%0A     */%0A    listWidth: PropTypes.number,%0A%0A    /**%0A     * The data of cascader-list.%0A     */%0A    data: PropTypes.array,%0A%0A    /**%0A     *%0A     */%0A    path: PropTypes.arrayOf(PropTypes.shape(%7B%0A%0A        /**%0A         *%0A         */%0A        node: PropTypes.oneOfType(%5BPropTypes.object, PropTypes.string, PropTypes.number%5D),%0A%0A        /**%0A         *%0A         */%0A        index: PropTypes.number%0A%0A    %7D)),%0A%0A    /**%0A     * The value field name in data. (default: %22value%22)%0A     */%0A    valueField: PropTypes.string,%0A%0A    /**%0A     * The display field name in data. (default: %22text%22)%0A     */%0A    displayField: PropTypes.string,%0A%0A    /**%0A     * The current depth.%0A     */%0A    currDepth: PropTypes.number,%0A%0A    /**%0A     *%0A     */%0A    depth: PropTypes.number%0A%0A%7D;%0A%0ACascaderListItem.defaultProps = %7B%0A%0A    listWidth: 200,%0A%0A    data: %5B%5D,%0A%0A    path: %5B%5D,%0A%0A    valueField: 'value',%0A    displayField: 'text',%0A%0A    currDepth: 0,%0A    depth: 0%0A%0A%7D;

update CascaderListItem