import slideVideoPlayerStyles from "./SlideVideoPlayer.module.css";

const SlideVideoPlayer = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      //IriSP.loadCss(IriSP.getLib("cssSplitter"));
      super(player, config);
    }

    static defaults = {
      playerModule: "HtmlPlayer",
      // mode is either "sidebyside" or "pip"
      mode: "sidebyside",
    };

    template =
      '<div class="Ldt-SlideVideoPlayer">\
  <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\
  </div>\
  <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\
  </div>\
</div>';

    draw() {
      var _this = this;

      _this.renderTemplate();
      this.insertSubwidget(
        _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"),
        {
          type: "ImageDisplay",
          annotation_type: _this.annotation_type,
        },
        "slide"
      );
      this.insertSubwidget(
        _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"),
        {
          type: _this.playerModule,
          video: _this.video,
          width: "100%",
          url_transform: _this.url_transform,
        },
        "player"
      );

      if (_this.mode == "pip") {
        _this.$.find(".Ldt-SlideVideoPlayer-panel").append(
          '<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>'
        );
        _this.$.on(
          "click",
          ".Ldt-SlideVideoPlayer-pip-menu-toggle",
          function () {
            _this.toggleMainDisplay();
          }
        );
        window.setTimeout(function () {
          _this.setMainDisplay("video");
        }, 1500);
      } else {
        // Default : side by side
        // FIXME: this should be better implemented through a signal sent
        // when widgets are ready (and not just loaded)
        window.setTimeout(function () {
          _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({
            orientation:
              screen.height > screen.width ? "vertical" : "horizontal",
            leftMin: 20,
            topMin: 20,
          });
        }, 1500);
      }
    }

    toggleMainDisplay() {
      if (
        this.$.find(
          ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
        ).hasClass("Ldt-SlideVideoPlayer-pip-main")
      ) {
        this.setMainDisplay("slides");
      } else {
        this.setMainDisplay("video");
      }
    }

    // Set main display (in case of a "switch" display mode)
    // main is either 'video' or 'slides'
    setMainDisplay(video_or_slides) {
      var main = this.$.find(
        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
      );
      var pip = this.$.find(
        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"
      );
      if (video_or_slides == "slides") {
        var temp = main;
        main = pip;
        pip = temp;
      }
      main
        .removeClass("Ldt-SlideVideoPlayer-pip-pip")
        .addClass("Ldt-SlideVideoPlayer-pip-main");
      pip
        .removeClass("Ldt-SlideVideoPlayer-pip-main")
        .addClass("Ldt-SlideVideoPlayer-pip-pip");
    }
  };
};

export { SlideVideoPlayer, slideVideoPlayerStyles };