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);
    }
});