var FilesView = FormView.extend({
  
  el: "#files",
  
  events: {
    "click .file": "pick",
    "click #sortByName": "clickSortByName",
    "click #sortByDate": "clickSortByDate",
    "click #sortBySize": "clickSortBySize",
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.templateTotal = this.$(".templateTotal").html()
  },
  
  load: function(files, thread){
    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|opus)$/i)
    }.bind(this))
    
    this.total = total
    this.has_music = has_music
    
    if (this.has_music) {
      audio.init()
    }

    this.resort(thread.settings.sort || "name_asc")
  },
  
  files: [],
  sortedFiles: [],
  currentSort: 'name',
  reversed: false,
  resort: function(sort, reverse){
    if (sort.indexOf("_")) {
      var s = sort.split("_")
      sort = s[0]
      reverse = s[1]
    }
    if (reverse === "asc" || !reverse) {
      this.reversed = false
    }
    else {
      this.reversed = true
    }
    switch (sort) {
      case 'name':
        return this.sortByName()
      case 'date':
        return this.sortByDate()
      case 'size':
        return this.sortBySize()
    }
  },
  
  clickSortByName: function(e){
    e && e.preventDefault()
    if (this.currentSort !== 'name') {
      this.currentSort = 'name'
      this.reversed = false
    } else {
      this.reversed = !this.reversed
    }
    this.sortByName()
    return this
  },
  clickSortByDate: function(e){
    e && e.preventDefault()
    if (this.currentSort !== 'date') {
      this.currentSort = 'date'
      this.reversed = true
    } else {
      this.reversed = !this.reversed
    }
    this.sortByDate()
    return this
  },
  clickSortBySize: function(e){
    e && e.preventDefault()
    if (this.currentSort !== 'size') {
      this.currentSort = 'size'
      this.reversed = true
    } else {
      this.reversed = !this.reversed
    }
    this.sortBySize()
    return this
  },

  sortByName: function(){
    this.currentSort = 'name'
    this.sort((a,b) => cmp(a.filename, b.filename))
  },
  sortByDate: function(){
    this.currentSort = 'date'
    this.sort((a,b) => cmp(a.date, b.date))
  },
  sortBySize: function(){
    this.currentSort = 'size'
    this.sort((a,b) => cmp(a.size, b.size))
  },
  
  sort: function(f){
    this.$el.empty()
    this.sortedFiles = this.reversed ? this.files.sort(f).reverse() : this.files.sort(f)
    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|opus)$/i)) return
    e.preventDefault()
    audio.play( e.target.dataset.index ) // index set in audio.js
  },

})

var FILE_SORTS = [
  { key: "name_asc", label: "Name, a-z" },
  { key: "name_desc", label: "Name, z-a" },
  { key: "date_asc", label: "Date, oldest" },
  { key: "date_desc", label: "Date, newest" },
  { key: "size_asc", label: "Size, smallest" },
  { key: "size_desc", label: "Size, largest" },
]