'use strict';

oml.ui.transfersPanel = function() {

    var ui = oml.user.ui,

        $list = Ox.TableList({
                columns: [
                    'id', 'title', 'extension', 'size',
                    'transferadded', 'transferprogress'
                ].map(function(id) {
                    var key = Ox.getObjectById(oml.config.itemKeys, id);
                    return {
                        align: Ox.contains([
                            'size', 'transferprogress'
                        ], id) ? 'right' : 'left',
                        format: function(value) {
                            return Ox.encodeHTMLEntities(key.format
                                ? Ox['format' + Ox.toTitleCase(key.format.type)].apply(
                                    this, [value].concat(key.format.args || [])
                                )
                                : Ox.isArray(key.type) ? (value || []).join(', ')
                                : (value || ''));
                        },
                        id: id,
                        operator: oml.getSortOperator(id),
                        title: Ox._(key.title),
                        visible: id != 'id',
                        width: id == 'title' ? 240
                            : id == 'transferadded' ? 160
                            : id == 'transferprogress' ? 80 - Ox.UI.SCROLLBAR_SIZE
                            : key.columnWidth
                    };
                }),
                columnsVisible: true,
                items: function(data, callback) {
                    Ox.Request.clearCache('find'); // FIXME: not ideal - and doesn't work
                    oml.api.find(Ox.extend(data, {
                        query: {
                            conditions: [{
                                key: 'mediastate',
                                operator: '==',
                                value: 'transferring'
                            }],
                            operator: '&'
                        }
                    }), callback);
                },
                keys: ['author'],
                scrollbarVisible: true,
                sort: [{key: 'transferadded', operator: '-'}],
                unique: 'id'
            })
            .bindEvent({
                select: function(data) {
                    $cancelButton.options({
                        disabled: data.ids.length == 0,
                        title: Ox._(
                            data.ids.length < 2
                            ? 'Cancel Transfer...'
                            : 'Cancel Transfers...'
                        )
                    });
                }
            }),

        $item = Ox.Element(),

        $cancelButton = Ox.Button({
                disabled: true,
                style: 'squared',
                title: Ox._('Cancel Transfer...'),
                width: 128
            })
            .css({
                margin: '8px'
            })
            .bindEvent({
                click: function() {
                    oml.api.cancelDownloads({
                        ids: $list.options('selected')
                    }, function() {
                        $list.reloadList(true);
                    });
                }
            })
            .appendTo($item),

        that = Ox.SplitPanel({
            elements: [
                {element: $list},
                {element: $item, size: 144}
            ],
            orientation: 'horizontal'
        });

    oml.bindEvent({
        transfer: Ox.throttle(function(data) {
            var current = $list.value(data.id);
            if (
                !Ox.isEmpty(current) 
                && current.transferprogress != data.progress
            ) {
                $list.value(data.id, 'transferprogress', data.progress);
            }
        }, 1000)
    });

    return that;
    
};