// DailymotionPlayer
import Mustache from "mustache";

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

    static defaults = {
      aspect_ratio: 14 / 9,
    };

    draw = function () {
      if (typeof this.video === "undefined") {
        this.video = this.media.video;
      }

      this.height = this.height || Math.floor(this.width / this.aspect_ratio);

      var _media = this.media,
        videoid = null,
        _this = this,
        state = {
          pause: true,
          apiready: false,
          volume: 0,
          time: 0,
          duration: 0,
        };

      var m = this.video.match(/www.dailymotion.com\/video\/(.+)/);
      if (m) {
        videoid = m[1];
      }

      var player_url = Mustache.render(
        "{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}",
        {
          protocol:
            document.location.protocol.search("http") == 0
              ? document.location.protocol
              : "http:",
          videoid: videoid,
        }
      );
      var params = {
        api: "postMessage",
        chromeless: 1,
        id: "dm_player",
        related: 0,
        autoplay: 1,
      };

      _this.$.html(
        Mustache.render(
          '<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>',
          {
            player_url: player_url,
            params: Object.keys(params)
              .reduce(function (a, k) {
                a.push(k + "=" + encodeURIComponent(params[k]));
                return a;
              }, [])
              .join("&"),
            width: this.width,
            height: this.height,
            id: params.id,
          }
        )
      );

      function setup_media_methods() {
        var dest = _this.$.find("#" + params.id)[0].contentWindow;
        var execute = function (c, v) {
          if (v !== undefined) c = c + "=" + v;
          dest.postMessage(c, "*");
        };

        _media.getCurrentTime = function () {
          return state.time;
        };
        _media.getVolume = function () {
          return state.volume;
        };
        _media.getPaused = function () {
          return state.pause;
        };
        _media.getMuted = function () {
          return state.muted;
        };
        _media.setCurrentTime = function (_milliseconds) {
          execute("seek", _milliseconds / 1000);
        };
        _media.setVolume = function (_vol) {
          execute("volume", _vol * 100);
        };
        _media.mute = function () {
          execute("muted", 1);
        };
        _media.unmute = function () {
          execute("muted", 0);
        };
        _media.play = function () {
          execute("play");
        };
        _media.pause = function () {
          execute("pause");
        };
      }

      window.addEventListener(
        "message",
        function (event) {
          // Parse event.data (query-string for to object)

          // Duck-checking if event.data is a string
          if (event.data.split === undefined) return;

          var info = event.data
            .split("&")
            .map(function (s) {
              return s.split("=");
            })
            .reduce(function (o, v) {
              o[v[0]] = decodeURIComponent(v[1]);
              return o;
            }, {});

          switch (info.event) {
            case "apiready":
              state.apiready = true;
              setup_media_methods();
              break;
            //case "canplay":
            //    break;
            case "durationchange":
              if (info.duration.slice(-2) == "sc") {
                state.duration = 1000 * Number(info.duration.slice(0, -2));
                _media.setDuration(state.duration);
              }
              break;
            case "ended":
              state.pause = true;
              break;
            case "loadedmetadata":
              _media.trigger("loadedmetadata");
              break;
            case "pause":
              state.pause = true;
              _media.trigger("pause");
              break;
            case "play":
              state.pause = false;
              _media.trigger("play");
              break;
            //case "playing":
            //    break;
            //case "progress":
            //  Loading progress
            //    break;
            case "seeked":
              state.time = new ns.Model.Time(1000 * Number(info.time));
              _media.trigger("seeked");
              break;
            case "timeupdate":
              state.time = new ns.Model.Time(1000 * Number(info.time));
              _media.trigger("timeupdate", state.time);
              break;
            case "volumechange":
              state.muted = info.muted == "true";
              state.volume = Number(info.volume) / 100;
              break;
          }
        },
        false
      );
    };
  };
};

export { DailymotionPlayer };