/**
 * @file 顺序表容器
 * @author sushuang(sushuang@baidu.com)
 * @date 2014-03
 */

define(function (require) {

    var $ = require('jquery');
    var lib = require('../lib');
    var Component = require('./Component');
    var ChangeKey = lib.obArray.ChangeKey;
    var inner = lib.makeInner();

    var ITEMS_PROP = '\x0E\x0E-foreach-items-prop';

    /**
     * [常见的使用例子一]
     *
     * 1. 模板中声明：
     *    {{ target: parentTplTarget }}
     *    ...
     *    <div data-cpt="
     *        type: 'Foreach',
     *        viewModelGet: 'listViewModels',
     *        itemTplTarget: 'myItemTplTarget'
     *    "></div>
     *    ...
     *    {{ /target }}
     *
     *    {{ target: myItemTplTarget }}
     *    <!-- 注意必须有唯一的根element !!! -->
     *    <div class="my-item ${viewModel.itemCssClass}">  <!-- 这个itemCssClass在viewModel中传入。 -->
     *        This is the item No. ${viewModel.index} <!-- 这个index是默认存在的，base 0。 -->
     *        <div data-cpt="type: 'TextInput', value: viewModel.v1"></div>
     *        <div data-cpt="type: 'TextInput', value: viewModel.v2"></div>
     *    </div>
     *    {{ /target }}
     *
     *
     * 2. Parent component中对 listViewModels 进行操作即可控制列表的增删改查。
     *    如Parent component的声明中，
     *        _define: {
     *            ...,
     *            viewModel: function () {
     *                return {
     *                    listViewModel: lib.obArray([])
     *                }
     *            }
     *        }
     *    然后，就可以在Parent component中操作 listViewModel 来增删改列表节点。
     *    如创建节点：
     *
     *    var listViewModels = this._viewModel().listViewModels;
     *    var myItemViewModel = {
     *        v1: lib.ob('aaaaaa'),
     *        v2: lib.ob('bbbbbb'),
     *        itemCssClass: listViewModels.count() % 2 === 0 ? 'my-item-highlight' : ''
     *    };
     *    listViewModels.push(myItemViewModel);
     *
     *    这样就完成了新加节点，并且传入了viewModel。
     *    并且可以通过v1和v2，来修改或读取myItem中textinput的值。
     *    如果要进行删除节点等操作，直接对listViewModel进行splice等操作即可（参见dataDriven.js#obArray）
     */


    /**
     * [常见的使用例子二]（只有 text input 的简单列表）
     *
     * 1. 模板中声明：
     *    ...
     *    <div data-cpt="
     *        type: 'Foreach',
     *        viewModelGet: 'listViewModels',
     *        itemType: 'TextInput' // 这里直接声明子节点的组件为TextInput。
     *                              // 当然也可以是别的内建的或自定义的组件。
     *    "></div>
     *    ...
     *
     *
     * 2. Parent component中对 listViewModels 进行操作即可控制列表的增删改查。
     *    如创建节点：
     *    var listViewModels = this._viewModel().listViewModels;
     *    var myItemViewModel = {value: lib.ob('aaaaaa')};
     *    listViewModels.push(myItemViewModel);
     *    其他同上。
     */


    /**
     * [常见的使用例子三]（自定义子节点的组件类）
     *
     * 1. 模板中声明：
     *    ...
     *    <div data-cpt="
     *        type: 'Foreach',
     *        viewModelGet: 'listViewModels',
     *        itemType: 'my/MyItem'
     *    "></div>
     *    ...
     *
     *
     * 2. componentConfig.js中声明：
     *    cptClasses['my/MyItem'] = require('./xxx/xxx/MyItem');
     *
     *
     * 3. ./xxx/xxx/MyItem文件：
     *    define(function (require) {
     *        var Component = require('dt/ui/Component')
     *        var MyItem = Component.extend({
     *              _define: {
     *                  tpl: require('tpl!./my.tpl.html'),
     *                  tplTarget: 'MyItemTarget',
     *                  css: 'some-css',
     *                  viewModel: function () {
     *                      return {
     *                          someOb: null, // 由父来构造并传入
     *                          something: '' // 由父来构造并传入
     *                      };
     *                  }
     *              },
     *              // 其他MyItem的逻辑
     *        });
     *        return MyItem;
     *    })
     *
     *
     * 4. 外层component中对 listViewModels 进行操作即可控制列表的增删改查。
     *    如：
     *    var myItemViewModel = {
     *        someOb: lib.ob('aaaaaa'),
     *        something: 123456
     *    };
     *    this._viewModel().listViewModels.push(myItemViewModel);
     *    这样就完成了新加节点，并且传入了viewModel。
     */


    /**
     * [API详细说明]
     *
     * <div data-cpt="
     *     type: 'foreach',
     *     viewModelGet: 'someObArray', // foreach本身的viewModel，是一个lib.obArray。
     *                                  // 里面每项是item的viewModel。
     *     itemType: 'someItemClz', // 表示每项使用的Component类，缺省则使用默认的Foreach.prototype.Item。
     *     itemTplTarget: 'xxx',    // 表示用于渲染每项节点html的tplTarget，缺省则为一个空的<div></div>。
     *                              // 注意：
     *                              //      (1) 此tpl中的dom须有个单个根节点，而不可多个dom根节点并列。
     *                              //      (2) 根节点不可有data-cpt属性。
     *
     *     itemTplParam: {          // 只有在指定了itemTplTarget时有效，表示渲染节点时可传入的参数，可缺省（很少需要使用这个东西）。
     *         aaa: 'xxx',          // 只用于模板渲染。如果只是用viewModel向item传递参数，
     *         bbb: 'yyy',          // 不需要这个，只需在someObArray中定义即可。
     *         ...                  // 可在每个子节点模板渲染时使用${viewModel.itemTplParam.aaa}渲染出字符'xxx'。
     *     }                        // 如果需要每个节点不同的渲染内容，则使用下面的itemConfigAttr。
     *     "></div>
     *
     * 如果需要对每个item分别定义，则：
     *
     * <div data-cpt="
     *     type: 'foreach',
     *     itemConfigAttr: 'attr1', // 表示从item的 viewModel.attr1 中取item config。
     *     ...
     * 即，
     * itemViewModel.attr1 = {
     *     itemType: 'TheItemType', // 解释同上，如不设则取外层foreach上的设置
     *     itemTplTarget: 'xxx', // 解释同上，如不设则取外层foreach上的设置
     *     itemTplParam: {aaa: 'xxx', bbb: 'yyy', ... } // 解释同上，如不设则取外层foreach上的设置
     * };
     */


    /**
     * 顺序表。能够根据viewModel的变化动态改变。
     * 输入的viewModel须是一个lib.obArray。
     *
     * @class
     */
    var Foreach = inner.attach(Component.extend({

        _define: {
            viewModel: function () {
                return {
                    data: lib.obArray([])
                };
            },
            viewModelPublic: ['data'],
            css: 'cpt-foreach'
        },

        /**
         * @override
         */
        _prepare: function () {
            var data = this._viewModel().data;

            this._sub(ITEMS_PROP, []);
            this._setItemsContainer();

            // 监听list改变
            this._disposable(
                data.subscribe(handleChange, this, 'arrayChange')
            );

            // 初始设值
            var initChangeOp = {
                key: ChangeKey.SPLICE,
                index: 0,
                removeCount: 0,
                added: []
            };
            for (var i = 0, arr = data.peek(), len = arr.length; i < len; i++) {
                initChangeOp.added.push(arr[i]);
            }
            handleChange.call(this, initChangeOp);
        },

        /**
         * @override
         */
        _dispose: function () {
            this.foreach(function (index, item) {
                item.dispose();
            });
        },

        /**
         * @override
         */
        _parseViewModel: function (inputViewModel) {
            lib.assert(lib.obTypeOf(inputViewModel) === 'obArray');
            return {data: inputViewModel};
        },

        /**
         * 遍历所有item cpt
         *
         * @public
         * @param {Function} callback 参数是：index, itemCptInstance
         */
        foreach: function (callback) {
            var items = this._items();
            for (var i = 0, len = items.length; i < len; i++) {
                callback(i, items[i]);
            }
        },

        /**
         * 根据index得到item cpt
         *
         * @public
         * @param {number} index index
         * @return {Object} item cpt instance
         */
        getItemAt: function (index) {
            return this._items()[index];
        },

        /**
         * 得到item数量
         *
         * @public
         * @return {number} item数量
         */
        count: function () {
            return this._viewModel().data.count();
        },

        /**
         * 得到items数组
         *
         * @protected
         * @return {Object} item
         */
        _items: function () {
            return this._sub(ITEMS_PROP);
        },

        /**
         * 设置内容的容器。默认为this.$el()本身。如果有派生类则可override
         *
         * @protected
         */
        _setItemsContainer: function () {
            inner(this).$itemsContainer = this.$el();
        },

        /**
         * @protected
         * @param {string} name config attr name
         * @return {*} config content
         */
        _getCommonConfig: function (name) {
            // 传入的cptDef优先级高，派生类设置的优先级低。
            return this.getCptDef(name) || this._getDefineProperty(name);
        }

    }));

    // @see lib.obArray.ChangeKey in dataDriven.js
    function handleChange(changeOp) {
        changeOpMethods[changeOp.key].call(this, changeOp); // eslint-disable-line no-use-before-define
    }

    var changeOpMethods = {};

    changeOpMethods[ChangeKey.REMOVE] = function (changeOp) {
        var indexes = changeOp.indexes;
        for (var i = 0, len = indexes.length; i < len; i++) {
            removeItems.call(this, indexes[i], 1);
        }
    };

    changeOpMethods[ChangeKey.SPLICE] = function (changeOp) {
        if (changeOp.removeCount) {
            removeItems.call(this, changeOp.index, changeOp.removeCount);
        }
        if (changeOp.added.length) {
            addItems.call(this, changeOp.index, changeOp.added);
        }
    };

    changeOpMethods[ChangeKey.MOVE] = function (changeOp) {
        moveItem.call(this, changeOp.originIndex, changeOp.finalIndex);
    };

    /**
     * 增加节点
     *
     * @private
     * @param {number} index index
     * @param {Array} values 要增加的节点
     */
    function addItems(index, values) {
        var items = this._items();

        // 共有的item定义
        var itemTplTarget = this._getCommonConfig('itemTplTarget');
        var itemTplParam = this._getCommonConfig('itemTplParam');
        var itemType = this._getCommonConfig('itemType');
        var ItemClz = itemType ? this.getCptClass(itemType) : this.Item;

        for (var i = 0, len = values.length; i < len; i++) {
            var subViewModel = values[i];

            // 每项的item定义（如果有的话）可覆盖共有的item定义
            var itemConfigAttr = this.getCptDef('itemConfigAttr');
            if (itemConfigAttr && subViewModel) {
                var itemConf = subViewModel[itemConfigAttr];
                itemConf.itemType && (ItemClz = this.getCptClass(itemConf.itemType));
                itemConf.itemTplTarget && (itemTplTarget = itemConf.itemTplTarget);
                itemConf.itemTplParam && (itemTplParam = itemConf.itemTplParam);
            }

            // 插入dom
            var $newEl = $(
                itemTplTarget
                    ? this._renderTpl(
                        itemTplTarget,
                        $.extend(
                            {index: index + i, itemTplParam: itemTplParam},
                            subViewModel
                        ) // 为了tpl中引用方便，把所有viewModel都传入
                    )
                    : '<div></div>'
            );
            // 需要有单个根节点，而不可是多个根节点并列。
            lib.assert($newEl.length === 1, 'MUST be only one root element in item tpl!');
            insertItemEl.call(this, $newEl, index + i);

            // 初始化item实例
            var newItem = new ItemClz($newEl, subViewModel);
            items.splice(index + i, 0, newItem);
        }
    }

    /**
     * 删除节点
     *
     * @private
     * @param {number} index index
     * @param {number} removeCount removeCount
     */
    function removeItems(index, removeCount) {
        var items = this._items();
        var removed = items.splice(index, removeCount);

        for (var i = 0, len = removed.length; i < len; i++) {
            var item = removed[i];
            var $itemEl = item.$el();
            item.dispose();
            $itemEl.remove();
        }
    }

    /**
     * 移动节点
     *
     * @private
     * @param {number} originIndex originIndex
     * @param {number} finalIndex finalIndex
     */
    function moveItem(originIndex, finalIndex) {
        var items = this._items();
        var item = items[originIndex];
        var $itemEl = item.$el();
        var $refItemEl = items[finalIndex].$el();

        if (finalIndex > originIndex) {
            $itemEl.insertAfter($refItemEl);
        }
        else {
            $itemEl.insertBefore($refItemEl);
        }

        items.splice(originIndex, 1)[0];
        items.splice(finalIndex, 0, item);
    }

    /**
     * 插入el
     *
     * @private
     * @param {jQuery} $newEl new el
     * @param {number} index index
     * @return {jQuery} new el
     */
    function insertItemEl($newEl, index) {
        var items = this._items();
        if (!items.length || index >= items.length) {
            return $newEl.appendTo(inner(this).$itemsContainer);
        }
        else {
            return $newEl.insertBefore(items[index].el());
        }
    }

    /**
     * 默认使用的顺序表项
     * 可在tpl中设置 itemType 来替换，或者被继承。
     *
     * @public
     * @class
     */
    Foreach.prototype.Item = Component.extend({
        _define: {
            css: 'dtui-foreach-item',
            // view model 可以任意透传
            viewModelOnlyAccessDeclaredProperties: false
        }
    });

    // /**
    //  * @see ko.utils.compareArrays 因为此算法太繁杂也不完全全面，启用
    //  * changes中每项的格式：
    //  * status: 枚举：'deleted', 'added', 'retained'（不会出现retained，因为指定了sparse）
    //  * moved: 表示移动（added时表示从哪个index移来，deleted时表示从哪个index移走）
    //  * value: 项的值
    //  * index: changes是按照index升序排列的。
    //  *      index表示“在比自身小的最后的changeItem操作结束后的index”（所以顺序遍历changes可还原操作过程）（这句话怀疑是错误的的，如splice清空时）。
    //  *      而index同样的项，只有可能出现一个added一个deleted，这两个顺序不一定
    //  *      （看oldarr.length和newArr.lengh谁大，因为内部逻辑是compareSmallArrayToBigArray）
    //  *      例如可能出现 [..., {index: 4, status: 'added'}, {index: 4, status: 'deleted'} ... ]，也有可能反之。
    //  *      同为added 或 同为deleted 的项的 index 不会重复。
    //  */
    // _handleChange: function (changes) {
    //     // FIXME
    //     // 对于用splice清空数组的情况，下面算法的实现是错误的！

    //     // FIXME
    //     // 此方法欠严格测试：
    //     // ko.utils.compareArrays(..., {sparse: true})
    //     // ['t', 't', 't', 't', 'a', 'b', 'c', 'd'], ['t', 't', 't', 't', 'a', '99', '66', 'c', 'd']
    //     // ['t', 't', 't', 't', 'a', 'b'], ['t', 't', 't', 't', 'a', 'b', '66', 'c', 'd']
    //     // ['t', 't', 't', 't', 'a', 'b'], ['t', 't', 't', 't', 'a', '66', 'c', 'b']
    //     // ['t', 't', 't', 't', 'a', 'b'], ['t', 't', 't', 't', '999', 'a', 'c', 'b']
    //     // ['t', 't', 't', 't', 'a', 'b'], ['t', 't', 't', 't', '999', 'b', 'a']
    //     // ['t', 't', 't', 't', '999', 'a', 'b'], ['t', 't', 't', 't', 'b', 'a']
    //     // ['t', 't', 't', 't', '999', 'a', 'b'], ['t', 't', 't', 't', 'b', 'x']
    //     // ['t', 't', 't', 't', '999', 'a', 'b'], ['t', 't', 't', 't', 'x', 'x']
    //     // ['t', 't', 't', 't', '999', 'a', 'b'], ['t', 't', 't', 't', 'x']
    //     // ['t', 't', 't', 't', '999', 'a'], ['t', 't', 't', 't', 'x']
    //     // ['t', 't', 't', 't', '999'], ['t', 't', 't', 't', 'x']
    //     // 下面这两个个例子里delete后的index规则不同，不理解
    //     // ['t', 't', 't', 't', 'a', 'e', 'f'], ['t', 't', 't', 't', 'a']
    //     // ['t', 't', 't', 't', 'a', 'e', 'f'], ['t', 't', 't', 't', 'a', 'f', 'r']
    //     // 下面这个例子没有探测出move，看来这个算法不理解。
    //     // ['t', 't', 't', 't', 'a', 'e', 'e1', 'g', 'f'], ['t', 't', 't', 't', 'a', 'g', 'f', 'r']
    //     // ['t', 't', 't', 't', 'a', 'e', 'b', 'f', 'c'], ['t', 't', 't', 't', 'a', 'b', 'c', 'r']

    //     // TODO
    //     // 批量修改优化：连续added、连续deleted、连续added/deleted交错

    //     this._prop('moveTemp', {});

    //     for (var i = 0, thisIndex = -1, thisAdded, thisDeleted, len = changes.length;
    //         i < len;
    //         i++
    //     ) {
    //         var thisChange = changes[i];
    //         var nextChange = changes[i + 1];

    //         if (thisChange.index > thisIndex) {
    //             thisIndex = thisChange.index;
    //             thisAdded = thisDeleted = null;
    //         }

    //         if (thisChange.status === 'added') {
    //             thisAdded = thisChange;
    //         }
    //         else if (thisChange.status === 'deleted') {
    //             thisDeleted = thisChange;
    //         }
    //         else {
    //             continue;
    //         }

    //         if (nextChange && nextChange.index === thisChange.index) {
    //             continue;
    //         }

    //         // 此时已经准备好本index层级的 thisAdded 和 thisDeleted。
    //         // 先delete 再 add。
    //         thisDeleted && removeItem.call(this, thisChange);
    //         thisAdded && addItem.call(this, thisChange);
    //     }

    //     // 最后替换所有为move而做的fake
    //     var items = this._items();
    //     for (var i = 0, len = items.length; i < len; i++) {
    //         replaceFake.call(this, items[i], i);
    //     }

    //     this._prop('moveTemp', null);
    // }


    return Foreach;
});