Ext.define("Compass.ErpApp.Shared.UploadWindow",{
  extend:"Ext.window.Window",
  alias:'widget.erpappshared_uploadwindow',
  statusIconRenderer : function(value){
    switch(value){
      default:
        return value;
      case 'Pending':
        return '<img src="/images/erp_app/desktop/applications/file_manager/hourglass.png" width=16 height=16>';
      case 'Sending':
        return '<img src="/images/erp_app/desktop/applications/file_manager/loading.gif" width=16 height=16>';
      case 'Error':
        return '<img src="/images/erp_app/desktop/applications/file_manager/cross.png" width=16 height=16>';
      case 'Cancelled':
      case 'Aborted':
        return '<img src="/images/erp_app/desktop/applications/file_manager/cancel.png" width=16 height=16>';
      case 'Uploaded':
        return '<img src="/images/erp_app/desktop/applications/file_manager/tick.png" width=16 height=16>';
    }
  },

  progressBarColumnRenderer : function(value, meta, record, rowIndex, colIndex, store){
    meta.css += ' x-grid3-td-progress-cell';
    var progressClass = "x-grid3-td-progress-cell-pending";
    if(value == 100){
      progressClass = "x-grid3-td-progress-cell-complete";
    }

    var progressBarColumnTemplate = new Ext.XTemplate(
      '<div class="ux-progress-cell-inner ux-progress-cell-inner-center ux-progress-cell-background '+progressClass+'" style="left:{value}%">',
      '<div>{value} %</div>',
      '</div>'
      )
    return progressBarColumnTemplate.apply({
      value: value
    });
  },

  updateFileUploadRecord : function(id, column, value){
    var rec = this.awesomeUploaderGrid.store.getById(id);
    rec.set(column, value);
    rec.commit();
  },

  initComponent: function() {
    this.callParent(arguments);
    this.addEvents(
      /**
         * @event fileuploaded
         * Fired after file is uploaded.
         * @param {Compass.ErpApp.Shared.UploadWindow } uploadWindow This object
         */
      'fileuploaded'
      );
  },

  constructor : function(config) {
    if(Compass.ErpApp.Utility.isBlank(config)){
      config = {};
    }
    var self = this;
    config['extraPostData'] = config['extraPostData'] || {};
    config['extraPostData']['authenticity_token'] = Compass.ErpApp.AuthentictyToken;

    this.awesomeUploader = new Ext.create("Ext.ux.AwesomeUploader",{
      region:'center',
      standardUploadUrl:config['standardUploadUrl'] || './file_manager/base/upload_file',
      flashUploadUrl:config['flashUploadUrl'] ||'./file_manager/base/upload_file',
      xhrUploadUrl:config['xhrUploadUrl'] ||'./file_manager/base/upload_file',
      extraPostData:config['extraPostData'],
      awesomeUploaderRoot:'/awsome_uploader/',
      height:40,
      allowDragAndDropAnywhere:true,
      autoStartUpload:config['autoStartUpload'] || true,
      maxFileSizeBytes: ErpApp.FileUpload.maxSize,
      listeners:{
        scope:this,
        fileselected:function(awesomeUploader, file){
          self.awesomeUploaderGrid.store.insert(1,[{
            id:file.id,
            name:file.name,
            size:file.size,
            status:'Pending',
            progress:0
          }]);
        },
        uploadstart:function(awesomeUploader, file){
          self.updateFileUploadRecord(file.id, 'status', 'Sending');
        },
        uploadprogress:function(awesomeUploader, fileId, bytesComplete, bytesTotal){
          self.updateFileUploadRecord(fileId, 'progress', Math.round((bytesComplete / bytesTotal)*100) );
        },
        uploadcomplete:function(awesomeUploader, file, serverData, resultObject){
          //Ext.Msg.alert('Data returned from server'+ serverData);

          try{
            var result = Ext.decode(serverData);//throws a SyntaxError.
          }catch(e){
            resultObject.error = 'Invalid JSON data returned';
            //Invalid json data. Return false here and "uploaderror" event will be called for this file. Show error message there.
            return false;
          }
          resultObject = result;

          if(result.success){
            self.updateFileUploadRecord(file.id, 'progress', 100 );
            self.updateFileUploadRecord(file.id, 'status', 'Uploaded' );
            this.fireEvent('fileuploaded', this);
          }else{
            return false;
          }
        },
        uploadaborted:function(awesomeUploader, file ){
          self.updateFileUploadRecord(file.id, 'status', 'Aborted' );
        },
        uploadremoved:function(awesomeUploader, file ){
          self.awesomeUploaderGrid.store.remove(self.awesomeUploaderGrid.store.getById(file.id));
        },
        uploaderror:function(awesomeUploader, file, serverData, resultObject){
          resultObject = resultObject || {};

          var error = 'Error! ';
          if(resultObject.error){
            error += resultObject.error;
          }

          self.updateFileUploadRecord(file.id, 'progress', 0 );
          self.updateFileUploadRecord(file.id, 'status', 'Error' );

        }
      }
    });

    this.awesomeUploaderGrid = Ext.create("Ext.grid.GridPanel",{
      width:420,
      region:'south',
      height:200,
      tbar:[
      {
        text:'Start Upload',
        icon:'/images/erp_app/desktop/applications/file_manager/tick.png',
        scope:this,
        handler:function(){
          self.awesomeUploader.startUpload();
        }
      },
      {
        text:'Abort',
        icon:'/images/erp_app/desktop/applications/file_manager/cancel.png',
        scope:this,
        handler:function(){
          var selModel = self.awesomeUploaderGrid.getSelectionModel();
          if(!selModel.hasSelection()){
            Ext.Msg.alert('','Please select an upload to cancel');
            return true;
          }
          var rec = selModel.selected.first();
          self.awesomeUploader.abortUpload(rec.data.id);
        }
      },
      {
        text:'Abort All',
        icon:'/images/erp_app/desktop/applications/file_manager/cancel.png',
        scope:this,
        handler:function(){
          self.awesomeUploader.abortAllUploads();
        }
      },
      {
        text:'Remove',
        icon:'/images/erp_app/desktop/applications/file_manager/cross.png',
        scope:this,
        handler:function(){
          var selModel = self.awesomeUploaderGrid.getSelectionModel();
          if(!selModel.hasSelection()){
            Ext.Msg.alert('','Please select an upload to cancel');
            return true;
          }
          var rec = selModel.selected.first();
          self.awesomeUploader.removeUpload(rec.data.id);
        }
      },
      {
        text:'Remove All',
        icon:'/images/erp_app/desktop/applications/file_manager/cross.png',
        scope:this,
        handler:function(){
          self.awesomeUploader.removeAllUploads();
        }
      }],
      store:Ext.create("Ext.data.Store",{
        proxy: {
          type: 'memory',
          reader: {
            type: 'json'
          }
        },
        fields: ['id','name','size','status','progress']
      }),
      columns:[
      {
        header:'File Name',
        menuDisabled:true,
        sortable:false,
        dataIndex:'name',
        width:150
      },
      {
        header:'Size',
        dataIndex:'size',
        menuDisabled:true,
        sortable:false,
        width:60,
        renderer:Ext.util.Format.fileSize
      },
      {
        header:'&nbsp;',
        dataIndex:'status',
        menuDisabled:true,
        sortable:false,
        width:30,
        renderer:self.statusIconRenderer
      },
      {
        header:'Status',
        dataIndex:'status',
        menuDisabled:true,
        sortable:false,
        width:60
      },
      {
        header:'Progress',
        dataIndex:'progress',
        menuDisabled:true,
        sortable:false,
        width:100,
        renderer:self.progressBarColumnRenderer
      }
      ]

    });

    config = Ext.apply({
      title:'File Upload',
      layout:'border',
      autoWidth:true,
      height:275,
      width:455,
      iconCls:'icon-upload',
      items:[this.awesomeUploader,this.awesomeUploaderGrid]
    }, config);

    this.callParent([config]);
  }

});