const AudioPlayer = View.extend({
  el: "#audioPlayer",

  events: {
    "click .icon": "toggle",
  },

  initialize: function () {
    this.$title = this.$(".title");

    this.icon_el = this.$(".icon").get(0);
    this.pos_el = this.$(".pos").get(0);
    this.track_el = this.$(".track").get(0);
    this.dot_el = this.$(".dot").get(0);
    this.time_el = this.$(".time").get(0);

    this.mousedown = this.mousedown.bind(this);
    this.mousemove = this.mousemove.bind(this);
    this.mouseup = this.mouseup.bind(this);

    if (is_mobile) {
      this.pos_el.addEventListener("touchstart", (e) =>
        this.mousedown(e.touches[0])
      );
      this.pos_el.addEventListener("touchmove", (e) =>
        this.mousemove(this.e.touches[0])
      );
      window.addEventListener("touchend", this.mouseup.bind);
    } else {
      this.pos_el.addEventListener("mousedown", this.mousedown);
      this.pos_el.addEventListener("mousemove", this.mousemove);
      window.addEventListener("mouseup", this.mouseup);
    }
    this.down = false;
    this.mousex = 0;

    audio.listen(this);
    audio.el.addEventListener("timeupdate", this.onTimeUpdate.bind(this));
  },

  /**
   * Mouse movements
   * */
  mousedown: function (e) {
    e.preventDefault && e.preventDefault();
    const track_left = this.pos_el.offsetLeft;
    this.down = true;
    this.mousex = (e.pageX - track_left) / this.track_el.offsetWidth;
  },

  mousemove: function (e, isTouch) {
    if (!this.down) return;
    const track_left = this.pos_el.offsetLeft;
    this.mousex = Math.min(
      Math.max(0, (e.pageX - track_left) / this.track_el.offsetWidth),
      1
    );
    this.dot_el.style.transform =
      "translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
  },

  mouseup: function (e) {
    if (!this.down) return;
    this.down = false;
    var t = this.mousex * (audio.el.duration || 1);
    audio.el.currentTime = Math.round(t);
    this.dot_el.style.transform =
      "translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
  },

  toggle: function () {
    audio.toggle();
  },

  /**
   * Receiving play events
   */
  onPlay: function (element) {
    if (!this.active) {
      this.$el.removeClass("unloaded");
      this.active = true;
      this.$el.addClass("active");
    }
    // if (index === music.length) return stop();
    if (!this.icon_el.classList.contains("active")) {
      this.icon_el.classList.add("active");
    }
    this.onTimeUpdate();

    if (element) {
      const title = element.innerText;
      this.$title.html(title);
    }
  },

  onPause: function () {
    this.icon_el.classList.remove("active");
  },

  onStop: function () {
    this.$el.removeClass("active");
    this.active = false;
  },

  onTimeUpdate: function () {
    if (this.down) {
      return;
    }
    let { currentTime, duration } = audio.el;
    let t = currentTime / (duration || 1);
    this.dot_el.style.transform =
      "translateX(" + this.track_el.offsetWidth * t + "px)";
    this.time_el.innerHTML = time(currentTime) + " / " + time(duration);
  },
});

function time(n) {
  if (!n) return "0:00";
  n = Math.floor(n);
  let s = n % 60;
  if (s < 10) s = "0" + s;
  let m = Math.floor(n / 60);
  return m + ":" + s;
}