'use strict';

Ox.FileInput = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            maxFiles: -1,
            maxLines: -1,
            maxSize: -1,
            width: 256
        })
        .options(options || {})
        .addClass('OxFileInput')
        .css({width: self.options.width + 'px'});

    self.multiple = self.options.maxFiles != 1;
    self.files = [];
    self.size = 0;

    self.$bar = Ox.Bar({size: 14})
        .css({width: self.options.width - 2 + 'px'})
        .appendTo(that);

    self.$text = $('<div>')
        .css({
            float: 'left',
            width: self.options.width - 102 + 'px',
            paddingLeft: '4px',
            overflow: 'hidden',
            textOverflow: 'ellipsis'
        })
        .html(getText())
        .appendTo(self.$bar);

    self.$size = $('<div>')
        .css({
            float: 'left',
            width: '64px',
            height: '14px',
            paddingRight: '16px',
            textAlign: 'right'
        })
        .appendTo(self.$bar);

    self.$button = Ox.Button({
            style: 'symbol',
            title: 'add',
            type: 'image'
        })
        .css({
            float: 'left',
            marginTop: '-1px'
        })
        .bindEvent({
            click: clearFile
        })
        .appendTo(self.$bar);

    self.$input = Ox.Element({
            element: '<input>'
            //tooltip: self.multiple ? 'Add Files' : 'Select File'
        })
        .attr(
            Ox.extend({
                title: self.multiple ? 'Add Files' : 'Select File',
                type: 'file'
            }, self.multiple ? {
                multiple: true
            } : {})
        )
        .css({
            float: 'left',
            width: '16px',
            height: '14px',
            margin: '-1px -7px 0 -16px',
            opacity: 0
        })
        .bind({
            change: addFiles
        })
        .appendTo(self.$bar);

    if (self.multiple) {
        self.$files = $('<div>')
            .addClass('OxFiles')
            .css({
                width: self.options.width - 2 + 'px',
                height: getHeight()
            })
            .hide()
            .appendTo(that);
        self.$list = Ox.TextList({
                columns: [
                    {
                        id: 'name',
                        visible: true,
                        width: self.options.width - 94
                    },
                    {
                        align: 'right',
                        format: function(value) {
                            return Ox.formatValue(value, 'B');
                        },
                        id: 'size',
                        visible: true,
                        width: 64
                    },
                    {
                        align: 'right',
                        format: function(value, data) {
                            return Ox.Button({
                                    style: 'symbol',
                                    title: 'close',
                                    type: 'image'
                                })
                                .attr({title: 'Remove File'})
                                .css({margin: '-1px -4px 0 0'})
                                .bindEvent({
                                    click: function() {
                                        self.$list.options({selected: [value]});
                                        removeFiles([value]);
                                        /*
                                        setTimeout(function() {
                                            self.$list.options({selected: []});
                                        }, 25);
                                        */
                                    }
                                });
                        },
                        id: 'id',
                        unique: true,
                        visible: true,
                        width: 28
                    }
                ],
                items: [],
                sort: [{key: 'name', operator: '+'}]
            })
            .css({
                left: 0,
                top: 0,
                width: self.options.width - 2 + 'px',
                height: '64px',
            })
            .bindEvent({
                'delete': function(data) {
                    removeFiles(data.ids);
                }
            })
            .appendTo(self.$files);
    }

    function addFiles(e) {
        var filelist = e.target.files,
            files = [];
        Ox.loop(filelist.length, function(i) {
            files.push(filelist.item(i));
        });
        if (self.options.maxSize != -1) {
            files.sort(function(a, b) {
                return a.size - b.size;
            });
        }
        files.sort(self.options.maxSize == -1 ? function(a, b) {
            return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
        } : function(a, b) {
            return a.size - b.size;
        }).forEach(function(file) {
            if (!exists(file) && (
                self.options.maxFiles == -1
                || self.files.length < self.options.maxFiles
            )) {
                if (
                    self.options.maxSize == -1
                    || self.size + file.size < self.options.maxSize
                ) {
                    self.files.push(file);
                    self.size += file.size;
                }
            }
        });
        Ox.print('FILES:::', files);
        self.$text.html(getText());
        self.$size.html(getSize());
        if (self.multiple) {
            self.$bar.css({
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 1
            });
            self.$files.css({height: getHeight()}).show();
            self.$list.options({items: getItems()});
            if (
                self.files.length == self.options.maxFiles
                || self.size == self.options.maxSize
            ) {
                self.$button.options({disabled: true});
            }
        } else {
            self.$button.options({title: 'close'}).attr({title: 'Clear'});
            self.$input.hide();
        }
    }

    function clearFile() {
        self.files = [];
        self.size = 0;
        self.$text.html(getText());
        self.$size.html(getSize());
        self.$button.options({title: 'add'}).attr({title: ''});
        self.$input.show();
    }

    function exists(file) {
        return self.files.some(function(f) {
            return f.name == file.name
                && f.size == file.size
                && Ox.isEqual(f.lastModifiedDate, file.lastModifiedDate);
        });
    }

    function getHeight() {
        return (
            self.options.maxLines == -1
                ? self.files.length
                : Math.min(self.files.length, self.options.maxLines)
        ) * 16 + 'px';
    }

    function getItems() {
        return self.files.map(function(file, i) {
            return {name: file.name, size: file.size, id: i};
        });
    }

    function getSize() {
        return self.size ? Ox.formatValue(self.size, 'B') : '';
    }

    function getText() {
        var length = self.files.length
        return length == 0
            ? 'No file' + (self.multiple ? 's' : '') + ' selected'
            : self.multiple
            ? length + ' file' + (length == 1 ? '' : 's') + ' selected'
            : self.files[0].name;
    }

    function removeFiles(ids) {
        self.files = self.files.filter(function(v, i) {
            return ids.indexOf(i) == -1;
        });
        self.size = self.files.reduce(function(prev, curr) {
            return prev + curr.size;
        }, 0);
        if (self.files.length == 0) {
            self.$bar.css({
                borderBottomLeftRadius: '8px',
                borderBottomRightRadius: '8px'
            });
            self.$files.hide();
        }
        self.$text.html(getText());
        self.$size.html(getSize());
        self.$list.options({items: getItems(), selected: []});
        self.$files.css({height: getHeight()});
    }

    return that;
};