var vent = require('../../../vent');
var Marionette = require('marionette');
var Backgrid = require('backgrid');
var FilenameCell = require('./FilenameCell');
var RelativeDateCell = require('../../../Cells/RelativeDateCell');
var DownloadLogCell = require('./DownloadLogCell');
var LogFileRow = require('./Row');
var ContentsView = require('./ContentsView');
var ContentsModel = require('./ContentsModel');
var ToolbarLayout = require('../../../Shared/Toolbar/ToolbarLayout');
var LoadingView = require('../../../Shared/LoadingView');
require('../../../jQuery/jquery.spin');

module.exports = Marionette.Layout.extend({
    template              : 'System/Logs/Files/LogFileLayoutTemplate',
    regions               : {
        toolbar  : '#x-toolbar',
        grid     : '#x-grid',
        contents : '#x-contents'
    },
    columns               : [{
        name     : 'filename',
        label    : 'Filename',
        cell     : FilenameCell,
        sortable : false
    }, {
        name     : 'lastWriteTime',
        label    : 'Last Write Time',
        cell     : RelativeDateCell,
        sortable : false
    }, {
        name     : 'downloadUrl',
        label    : '',
        cell     : DownloadLogCell,
        sortable : false
    }],
    initialize            : function(options){
        this.collection = options.collection;
        this.deleteFilesCommand = options.deleteFilesCommand;
        this.listenTo(vent, vent.Commands.ShowLogFile, this._fetchLogFileContents);
        this.listenTo(vent, vent.Events.CommandComplete, this._commandComplete);
        this.listenTo(this.collection, 'sync', this._collectionSynced);
        this.collection.fetch();
    },
    onShow                : function(){
        this._showToolbar();
        this._showTable();
    },
    _showToolbar          : function(){
        var leftSideButtons = {
            type       : 'default',
            storeState : false,
            items      : [{
                title        : 'Refresh',
                icon         : 'icon-refresh',
                ownerContext : this,
                callback     : this._refreshTable
            }, {
                title          : 'Delete Log Files',
                icon           : 'icon-trash',
                command        : this.deleteFilesCommand,
                successMessage : 'Log files have been deleted',
                errorMessage   : 'Failed to delete log files'
            }]
        };
        this.toolbar.show(new ToolbarLayout({
            left    : [leftSideButtons],
            context : this
        }));
    },
    _showTable            : function(){
        this.grid.show(new Backgrid.Grid({
            row        : LogFileRow,
            columns    : this.columns,
            collection : this.collection,
            className  : 'table table-hover'
        }));
    },
    _collectionSynced     : function(){
        if(!this.collection.any()) {
            return;
        }
        var model = this.collection.first();
        this._fetchLogFileContents({model : model});
    },
    _fetchLogFileContents : function(options){
        this.contents.show(new LoadingView());
        var model = options.model;
        var contentsModel = new ContentsModel(model.toJSON());
        this.listenToOnce(contentsModel, 'sync', this._showDetails);
        contentsModel.fetch({dataType : 'text'});
    },
    _showDetails          : function(model){
        this.contents.show(new ContentsView({model : model}));
    },
    _refreshTable         : function(buttonContext){
        this.contents.close();
        var promise = this.collection.fetch();
        if(buttonContext) {
            buttonContext.ui.icon.spinForPromise(promise);
        }
    },
    _commandComplete      : function(options){
        if(options.command.get('name') === this.deleteFilesCommand.toLowerCase()) {
            this._refreshTable();
        }
    }
});