import _ from "lodash";
import Raphael from "raphael";

const Sparkline = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
    }

    static defaults = {
      lineColor: "#7492b4",
      fillColor: "#aeaeb8",
      lineWidth: 2,
      slice_count: 20,
      height: 50,
      margin: 5,
    };

    draw() {
      var _slices = [],
        _duration = this.source.getDuration(),
        _max = 0,
        _list = this.getWidgetAnnotations();
      for (var _i = 0; _i < this.slice_count; _i++) {
        var _begin = (_i * _duration) / this.slice_count,
          _end = ((_i + 1) * _duration) / this.slice_count,
          _volume = 0;
        _list.forEach(function (_annotation) {
          if (_annotation.begin < _end && _annotation.end >= _begin) {
            var _d = _annotation.getDuration().milliseconds;
            if (!_d) {
              _volume += 1;
            } else {
              _volume +=
                (Math.min(_annotation.end, _end) -
                  Math.max(_annotation.begin, _begin)) /
                _d;
            }
          }
        });
        _max = Math.max(_max, _volume);
        _slices.push(_volume);
      }
      if (!_max) {
        return;
      }
      this.paper = new Raphael(this.$[0], this.width, this.height);
      var _scale = (this.height - this.margin) / _max,
        _width = this.width / this.slice_count,
        _this = this,
        _y = _(_slices).map(function (_v) {
          return _this.margin + _this.height - _scale * _v;
        }).value(),
        _d =
          _(_y).reduce(function (_memo, _v, _k) {
            return (
              _memo +
              (_k
                ? "C" +
                  _k * _width +
                  " " +
                  _y[_k - 1] +
                  " " +
                  _k * _width +
                  " " +
                  _v +
                  " " +
                  (_k + 0.5) * _width +
                  " " +
                  _v
                : "M0 " + _v + "L" + 0.5 * _width + " " + _v)
            );
          }, "") +
          "L" +
          this.width +
          " " +
          _y[_y.length - 1],
        _d2 = _d + "L" + this.width + " " + this.height + "L0 " + this.height;

      this.paper.path(_d2).attr({
        stroke: "none",
        fill: this.fillColor,
      });

      this.paper.path(_d).attr({
        fill: "none",
        stroke: this.lineColor,
        "stroke-width": this.lineWidth,
      });

      this.rectangleProgress = this.paper.rect(0, 0, 0, this.height).attr({
        stroke: "none",
        fill: "#808080",
        opacity: 0.3,
      });

      this.ligneProgress = this.paper
        .path("M0 0L0 " + this.height)
        .attr({ stroke: "#ff00ff", "line-width": 2 });

      this.$.click(function (_e) {
        var _x = _e.pageX - _this.$.offset().left;
        _this.media.setCurrentTime((_this.media.duration * _x) / _this.width);
      });

      this.onMediaEvent("timeupdate", "onTimeupdate");
    }

    onTimeupdate(_time) {
      var _x = Math.floor((this.width * _time) / this.media.duration);
      this.rectangleProgress.attr({
        width: _x,
      });
      this.ligneProgress.attr({
        path: "M" + _x + " 0L" + _x + " " + this.height,
      });
    }
  };
};

export { Sparkline };