import _ from "lodash";
import jQuery from "jquery";
import mashupPlayerStyles from "./MashupPlayer.module.css";

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

    static defaults = {
      aspect_ratio: 14 / 9,
      split_screen: false,
      player_type: "PopcornPlayer",
      background: "#000000",
    };

    draw() {
      var _this = this,
        _mashup = this.media,
        _currentMedia = null,
        _currentAnnotation = null,
        _segmentBegin,
        _segmentEnd,
        _timecode = 0,
        _seeking = false,
        _seekdiv,
        _timedelta,
        medialist = _mashup.getMedias();

      _mashup.paused = !this.autostart && !this.autoplay;

      function changeCurrentAnnotation() {
        if (_timecode >= _mashup.duration) {
          if (!_mashup.paused) {
            _mashup.paused = true;
            _mashup.trigger("pause");
          }
          _timecode = 0;
        }
        var _annotation = _mashup.getAnnotationAtTime(_timecode);
        if (typeof _annotation === "undefined") {
          if (_currentMedia) {
            _currentMedia.pause();
            if (!_mashup.paused) {
              _mashup.paused = true;
              _mashup.trigger("pause");
            }
          }
          return;
        }
        if (_annotation !== _currentAnnotation) {
          _currentAnnotation = _annotation;
          _segmentBegin = _currentAnnotation.annotation.begin.milliseconds;
          _segmentEnd = _currentAnnotation.annotation.end.milliseconds;
          _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds;
          _currentMedia = _currentAnnotation.getMedia();

          for (var _i = 0; _i < medialist.length; _i++) {
            if (medialist[_i].id !== _currentMedia.id) {
              if (!_this.split_screen) {
                medialist[_i].hide();
              }
              medialist[_i].pause();
            } else {
              medialist[_i].show();
            }
          }

          /* PRELOADING */
          var _preloadedMedias = [],
            _toPreload = _mashup.getAnnotations().filter(function (_a) {
              return (
                _a.begin >= _currentAnnotation.end &&
                _a.getMedia() !== _currentMedia
              );
            });
          _(_toPreload).each(function (_a) {
            var _media = _a.getMedia();
            if (_(_preloadedMedias).indexOf(_media.id) === -1) {
              _preloadedMedias.push(_media.id);
              _media.setCurrentTime(_a.annotation.begin.getSeconds());
              _media.seeking = true;
              /*
                    console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds());
*/
            }
          });

          //        console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta)
          //    } else {
          //        console.log("changeCurrentAnnotation called, but segment hasn't changed");
        }

        _currentMedia.setCurrentTime(_timecode + _timedelta);
        _currentMedia.seeking = true;

        if (!_mashup.paused) {
          _currentMedia.play();
          _seeking = true;
          _seekdiv.show();
        }
        /*
        console.log("Setting time of media", _currentMedia.id, "to", _timecode + _timedelta)     
*/
        _mashup.trigger("timeupdate", new ns.Model.Time(_timecode));
      }

      if (!this.height) {
        this.height = Math.floor(this.width / this.aspect_ratio);
        this.$.css({
          height: this.height,
        });
      }

      this.$.css({
        background: this.background,
      });

      var _grid = Math.ceil(Math.sqrt(medialist.length)),
        _width = this.split_screen ? this.width / _grid : this.width,
        _height = this.split_screen ? this.height / _grid : this.height;

      _(medialist).each(function (_media, _key) {
        var _el = jQuery(
          '<div class="Ldt-MashupPlayer-Media"><div class="Ldt-MashupPlayer-Subwidget"></div></div>'
        );
        _el.css({
          top: _this.split_screen ? _height * Math.floor(_key / _grid) : 0,
          left: _this.split_screen ? _width * (_key % _grid) : 0,
          height: _height,
          width: _width,
          display: _this.split_screen ? "block" : "none",
        });
        _this.$.append(_el);

        _this.insertSubwidget(
          _el.find(".Ldt-MashupPlayer-Subwidget"),
          _({
            type: _this.player_type,
            media_id: _media.id,
            height: _height,
            width: _width,
            url_transform: _this.url_transform,
          }).extend(_this.player_options)
        );

        _media.loadedMetadata = false;
        _media.show = function () {
          _el.show();
        };
        _media.hide = function () {
          _el.hide();
        };
        _media.on("loadedmetadata", function () {
          _media.loadedMetadata = true;
          var _allLoaded = true;
          for (var _i = 0; _i < medialist.length; _i++) {
            _allLoaded = _allLoaded && medialist[_i].loadedMetadata;
          }
          if (_allLoaded) {
            _seekdiv.fadeOut();
            changeCurrentAnnotation();
            _mashup.trigger("loadedmetadata");
          }
        });
        _media.on("timeupdate", function (_time) {
          if (!_mashup.paused && _media === _currentMedia && !_media.seeking) {
            /*
                var _status = "Timeupdate from " + _media.id + " at time " + _time;
*/
            if (_time < _segmentEnd) {
              if (_time >= _segmentBegin) {
                _timecode = _time - _timedelta;
                /*
                        _status += " within segment";
*/
              } else {
                _timecode = _segmentBegin - _timedelta;
                _media.setCurrentTime(_segmentBegin);
                /*
                        _status += " before segment";
*/
              }
            } else {
              _timecode = _segmentEnd - _timedelta;
              _media.pause();
              changeCurrentAnnotation();
              /*
                    _status += " after segment";
*/
            }
            /*
                _status += " (" + _segmentBegin + " to " + _segmentEnd + ")" + ", translated to " + _timecode;
                console.log(_status);
*/
            _mashup.trigger("timeupdate", new ns.Model.Time(_timecode));
          }
        });
        _media.on("seeked", function () {
          _media.seeking = false;
          if (_media === _currentMedia && _seeking) {
            _seeking = false;
            _seekdiv.hide();
          }
        });
        _media.on("play", function () {
          if (_media === _currentMedia) {
            _mashup.trigger("play");
          }
        });
        _media.on("pause", function () {
          if (_media === _currentMedia) {
            _mashup.trigger("pause");
          }
        });
        _media.on("volumechange", function () {
          _mashup.muted = _media.muted;
          _mashup.volume = _media.volume;
          _mashup.trigger("volumechange");
        });
      });

      _seekdiv = jQuery('<div class="Ldt-MashupPlayer-Waiting"></div>');

      this.$.append(_seekdiv);

      // Binding functions to Popcorn

      _mashup.on("setcurrenttime", function (_milliseconds) {
        _timecode = _milliseconds;
        changeCurrentAnnotation();
      });

      _mashup.on("setvolume", function (_vol) {
        for (var _i = 0; _i < medialist.length; _i++) {
          medialist[_i].setVolume(_vol);
        }
        _mashup.volume = _vol;
      });

      _mashup.on("setmuted", function (_muted) {
        for (var _i = 0; _i < medialist.length; _i++) {
          medialist[_i].setMuted(_muted);
        }
        _mashup.muted = _muted;
      });

      _mashup.on("setplay", function () {
        _mashup.paused = false;
        changeCurrentAnnotation();
      });

      _mashup.on("setpause", function () {
        _mashup.paused = true;
        if (_currentMedia) {
          _currentMedia.pause();
        }
      });

      _mashup.on("loadedmetadata", changeCurrentAnnotation);
    }
  };
};

export { MashupPlayer, mashupPlayerStyles };