var _ = require('underscore');
var vent = require('vent');
var Marionette = require('marionette');
var Backgrid = require('backgrid');
var FileBrowserCollection = require('./FileBrowserCollection');
var EmptyView = require('./EmptyView');
var FileBrowserRow = require('./FileBrowserRow');
var FileBrowserTypeCell = require('./FileBrowserTypeCell');
var FileBrowserNameCell = require('./FileBrowserNameCell');
var RelativeDateCell = require('../../Cells/RelativeDateCell');
var FileSizeCell = require('../../Cells/FileSizeCell');
var LoadingView = require('../LoadingView');
require('../../Mixins/DirectoryAutoComplete');

module.exports = Marionette.Layout.extend({
    template         : "Shared/FileBrowser/FileBrowserLayoutTemplate",
    regions          : {browser : "#x-browser"},
    ui               : {
        path      : ".x-path",
        indicator : ".x-indicator"
    },
    events           : {
        "typeahead:selected .x-path"      : "_pathChanged",
        "typeahead:autocompleted .x-path" : "_pathChanged",
        "keyup .x-path"                   : "_inputChanged",
        "click .x-ok"                     : "_selectPath"
    },
    initialize       : function(options){
        this.collection = new FileBrowserCollection();
        this.collection.showFiles = options.showFiles || false;
        this.collection.showLastModified = options.showLastModified || false;
        this.input = options.input;
        this._setColumns();
        this.listenTo(this.collection, "sync", this._showGrid);
        this.listenTo(this.collection, "filebrowser:folderselected", this._rowSelected);
    },
    onRender         : function(){
        this.browser.show(new LoadingView());
        this.ui.path.directoryAutoComplete();
        this._fetchCollection(this.input.val());
        this._updatePath(this.input.val());
    },
    _setColumns      : function(){
        this.columns = [{
            name     : "type",
            label    : "",
            sortable : false,
            cell     : FileBrowserTypeCell
        }, {
            name     : "name",
            label    : "Name",
            sortable : false,
            cell     : FileBrowserNameCell
        }];
        if(this.collection.showLastModified) {
            this.columns.push({
                name     : "lastModified",
                label    : "Last Modified",
                sortable : false,
                cell     : RelativeDateCell
            });
        }
        if(this.collection.showFiles) {
            this.columns.push({
                name     : "size",
                label    : "Size",
                sortable : false,
                cell     : FileSizeCell
            });
        }
    },
    _fetchCollection : function(path){
        this.ui.indicator.show();
        var data = {includeFiles : this.collection.showFiles};
        if(path) {
            data.path = path;
        }
        this.collection.fetch({data : data});
    },
    _showGrid        : function(){
        this.ui.indicator.hide();
        if(this.collection.models.length === 0) {
            this.browser.show(new EmptyView());
            return;
        }
        var grid = new Backgrid.Grid({
            row        : FileBrowserRow,
            collection : this.collection,
            columns    : this.columns,
            className  : "table table-hover"
        });
        this.browser.show(grid);
    },
    _rowSelected     : function(model){
        var path = model.get("path");
        this._updatePath(path);
        this._fetchCollection(path);
    },
    _pathChanged     : function(e, path){
        this._fetchCollection(path.value);
        this._updatePath(path.value);
    },
    _inputChanged    : function(){
        var path = this.ui.path.val();
        if(path === "" || path.endsWith("\\") || path.endsWith("/")) {
            this._fetchCollection(path);
        }
    },
    _updatePath      : function(path){
        if(path !== undefined || path !== null) {
            this.ui.path.val(path);
        }
    },
    _selectPath      : function(){
        this.input.val(this.ui.path.val());
        this.input.trigger("change");
        vent.trigger(vent.Commands.CloseFileBrowser);
    }
});