var FilesView = FormView.extend({
  
  el: "#files",
  
  events: {
    "click .file": "pick",
    "click #sortByName": "sortByName",
    "click #sortByDate": "sortByDate",
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.templateTotal = this.$(".templateTotal").html()
  },
  
  load: function(files){
    if (! files.length) {
      this.$el.hide()
    }
    var total = 0, has_music = false
    this.files = files
    files.forEach(function(file){
      if (is_image(file.filename)) {
        // return
      }
      total += file.size
      has_music = has_music || file.filename.match(/(mp3|wav|ogg)/i)
    }.bind(this))
    
    this.total = total
    this.has_music = has_music
    
    if (this.has_music) {
      audio.init()
    }

    this.sortByName()
  },
  
  files: [],
  sortedFiles: [],
  currentSort: 'name',
  reverse: false,
  
  sortByName: function(e){
    e && e.preventDefault()
    if (this.currentSort !== 'name') {
      this.currentSort = 'name'
      this.reverse = false
    } else {
      this.reverse = !this.reverse
    }
    this.sort((a,b) => cmp(a.filename, b.filename))
  },
  sortByDate: function(e){
    e && e.preventDefault()
    if (this.currentSort !== 'date') {
      this.currentSort = 'date'
      this.reverse = true
    } else {
      this.reverse = !this.reverse
    }
    this.sort((a,b) => cmp(a.date, b.date))
  },
  
  sort: function(f){
    this.$el.empty()
    this.sortedFiles = this.reverse ? this.files.sort(f) : this.files.sort(f).reverse()
    this.sortedFiles.forEach(file => {
      this.appendFile(file)
    })
    this.appendTotal()
    if (this.has_music) {
      audio.index()
    }
  },
  
  parse: function(file){
    var size = hush_size(file.size)
    var datetime = verbose_date(file.date, true)
    var date_class = carbon_date(file.date)
    var link = make_link(file)

    var t = this.template.replace(/{{id}}/g, file.id)
                         .replace(/{{username}}/g, file.username)
                         .replace(/{{link}}/g, link)
                         .replace(/{{filename}}/g, file.filename)
                         .replace(/{{date_class}}/g, date_class)
                         .replace(/{{date}}/g, datetime[0])
                         .replace(/{{time}}/g, datetime[1])
                         .replace(/{{size_class}}/g, size[0])
                         .replace(/{{size}}/g, size[1])
    var $t = $(t)
    if (app.debug) {
      $t.find('.user').append(' #' + file.id)
    }
    return $t
  },
  
  prependFile: function(file){
    var $el = this.parse(file)
    this.$el.prepend($el)
  },

  appendFile: function(file){
    var $el = this.parse(file)
    this.$el.append($el)
  },
  
  appendTotal: function(){
    var size = hush_size(this.total)
    var nameClass = this.sort === 'name' ? 'bold' : ''
    if (nameClass && this.reverse) {
      nameClass += ' italic'
    }
    var dateClass = this.sort === 'date' ? 'bold' : ''
    if (dateClass && this.reverse) {
      dateClass += ' italic'
    }
    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
                              .replace(/{{size}}/g, size[1])
                              .replace(/{{nameClass}}/g, nameClass)
                              .replace(/{{dateClass}}/g, dateClass)
    this.$el.append(t)
  },
  
  pick: function(e){
    if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
    if (! e.target.href || ! e.target.href.match(/(mp3|wav|ogg)/i)) return
    e.preventDefault()
    audio.play( e.target.dataset.index ) // index set in audio.js
  },

})