// VideojsPlayer

import "videojs-youtube/dist/Youtube.js";

import Vimeo from './videojs_plugins/Vimeo.js';

import Dailymotion from "./videojs_plugins/Dailymotion.js";

import videojs from "video.js";

import videojsStyles from "./VideojsPlayer.module.css";

import mime from "mime-types";

const alternative_types = [{ 

    regex:/^(https?:\/\/)?((?:www|m)\.)?(?:youtube(?:-nocookie)?\.com|youtu.be)/,

    type: "video/youtube"

  }, {

    regex:/^(https?:\/\/)?(www\.)?vimeo\.com/,

    type: "video/vimeo"

  }, {

    regex:/^(https?:\/\/)?(www\.)?dailymotion\.com/,

    type: "video/dailymotion"

  }

]

const VideojsPlayerWidget = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {};

    draw() {

      const techOrder = [ 'html5', 'Youtube', 'Vimeo' ];

      if(this.dailymotionPlayerId) {

        techOrder.push("Dailymotion");

        Dailymotion.loadLibrary(this.dailymotionPlayerId);

      }

      var _opts = { techOrder },

        _seekPause = false,

        _pauseState = true;

      if (typeof this.video === "undefined") {

        this.video = this.media.video;

      }

      let type = mime.lookup(this.video);

      if(!type) {

        for(const tdef of alternative_types) {

          if(tdef.regex.test(this.video)) {

            type = tdef.type;

            break;

          }

        }

      }

      _opts.src = { type: type || false, src:this.video };

      _opts.controls = false;

      _opts.width = this.width;

      if (this.height) {

        _opts.height = this.height;

      }

      if (this.autostart) {

        // There seems to be an autostart bug

        _opts.autostart = true;

//        _pauseState = false;

//        this.media.trigger("play");

      }

      if (this.url_transform) {

        _opts.src.src = this.url_transform(_opts.src.src);

      }

      // Binding functions to jwplayer

      if(!this.media) {

        return;

      }

      var _media = this.media;

      const videoId = `video_${this.generateUid("_")}`;

      this.$.append(`<video class="video-js" id="${videoId}"><source type="${_opts.src.type || 'video/mp4'}" src="${_opts.src.src}"></source></video>`)

      const _player = videojs(videoId, _opts);

      _media.on("setcurrenttime", function (_milliseconds) {

        _seekPause = _pauseState;

        _player.currentTime(_milliseconds/1000);

      });

      _media.on("setvolume", function (_vol) {

        _player.volume(_vol);

        _media.volume = _vol;

      });

      _media.on("setmuted", function (_muted) {

        _player.muted(_muted);

        _media.muted = _muted;

      });

      _media.on("setplay", function () {

        _player.play();

        _media.paused = false;

      });

      _media.on("setpause", function () {

        _player.pause();

        _media.paused = true;

      });

      // Binding jwplater events to media

      function getVolume() {

        _media.muted = _player.muted();

        _media.volume = _player.volume();

      }

      _player.on("timeupdate", function() {

        _media.trigger(

          "timeupdate",

          new ns.Model.Time(_player.currentTime()*1000)

        );

      })

      _player.ready(function () {

        _media.trigger(

          "timeupdate",

          new ns.Model.Time(_player.currentTime()*1000)

        );

        _pauseState = _player.paused();

        _media.paused = _player.paused();

        _media.trigger("loadedmetadata");

      });

      _player.on("pause", function() {

        _pauseState = true;

        _media.trigger("pause");

      })

      _player.on("play", function() {

        _pauseState = false;

        _media.trigger("play");

      })

      videojs.use("*", function (player) {

        return {

          play: function (terminated, value) {

            _pauseState = false;

            _media.trigger("play");

            return value;

          },

          setCurrentTime: function (value) {

            if (_seekPause) {

              _player.pause();

              _seekPause = false;

            } else {

              if (_pauseState && !_player.paused()) {

                _pauseState = false;

                _media.trigger("play");

              }

            }

            _media.trigger("timeupdate", new ns.Model.Time(value));

            return value;

          },

          pause: function (terminated, value) {

            _pauseState = true;

            _media.trigger("pause");

            return value;

          },

          setMuted: function (value) {

            _media.muted = value;

            _media.trigger("muted");

            _media.trigger("volumechange");

            return value;

          },

          setVolume: function (value) {

            _media.volume = value;

            _media.trigger("volumechange");

            return value;

          },

        };

      });

      this.videojsPlayer = _player;

    }

  };

};

export { VideojsPlayerWidget as VideojsPlayer, videojsStyles, Vimeo, Dailymotion };