'use strict';

/**
 * Facebook renderer
 *
 * It creates an <iframe> from a <div> with specific configuration.
 * @see https://developers.facebook.com/docs/plugins/embedded-video-player
 */
const FacebookApi = {

	promise: null,

	/**
	 * Create a queue to prepare the creation of <iframe>
	 *
	 * @param {Object} settings - an object with settings needed to create <iframe>
	 */
	load: (settings) => {

		if (typeof FB !== 'undefined') {
			FacebookApi._createPlayer(settings);
		} else {
			FacebookApi.promise = FacebookApi.promise || mejs.Utils.loadScript(`https://connect.facebook.net/${settings.options.lang}/sdk.js`);
			FacebookApi.promise.then(() => {
				FB.init(settings.options);

				setTimeout(() => {
					FacebookApi._createPlayer(settings);
				}, 50);
			});
		}
	},

	/**
	 * Create a new instance of Facebook API player and trigger a custom event to initialize it
	 *
	 * @param {Object} settings - the instance ID
	 */
	_createPlayer: (settings) => {
		window[`__ready__${settings.id}`]();
	}
};
const FacebookRenderer = {
	name: 'facebook',
	options: {
		prefix: 'facebook',
		facebook: {
			appId: '',
			xfbml: true,
			version: 'v2.10',
			lang: 'en_US'
		}
	},

	/**
	 * Determine if a specific element type can be played with this render
	 *
	 * @param {String} type
	 * @return {Boolean}
	 */
	canPlayType: (type) => ~['video/facebook', 'video/x-facebook'].indexOf(type.toLowerCase()),

	/**
	 * Create the player instance and add all native events/methods/properties as possible
	 *
	 * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
	 * @param {Object} options All the player configuration options passed through constructor
	 * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
	 * @return {Object}
	 */
	create: (mediaElement, options, mediaFiles) => {
		const
			apiStack = [],
			fb = {},
			readyState = 4
		;

		let
			hasStartedPlaying = false,
			paused = true,
			ended = false,
			fbPlayer = null,
			src = '',
			poster = '',
			autoplay = mediaElement.originalNode.autoplay
		;

		fb.options = options;
		fb.id = mediaElement.id + '_' + options.prefix;
		fb.mediaElement = mediaElement;

		if (mejs.Features.isiPhone && mediaElement.originalNode.getAttribute('poster')) {
			poster = mediaElement.originalNode.getAttribute('poster');
			mediaElement.originalNode.removeAttribute('poster');
		}

		// wrappers for get/set
		const
			props = mejs.html5media.properties,
			assignGettersSetters = (propName) => {

				const capName = `${propName.substring(0, 1).toUpperCase()}${propName.substring(1)}`;

				fb[`get${capName}`] = () => {

					if (fbPlayer !== null) {
						const value = null;

						// figure out how to get youtube dta here
						switch (propName) {
							case 'currentTime':
								return fbPlayer.getCurrentPosition();
							case 'duration':
								return fbPlayer.getDuration();
							case 'volume':
								return fbPlayer.getVolume();
							case 'paused':
								return paused;
							case 'ended':
								return ended;
							case 'muted':
								return fbPlayer.isMuted();
							case 'buffered':
								return {
									start: () => {
										return 0;
									},
									end: () => {
										return 0;
									},
									length: 1
								};
							case 'src':
								return src;
							case 'readyState':
								return readyState;
						}

						return value;
					} else {
						return null;
					}
				};

				fb[`set${capName}`] = (value) => {

					if (fbPlayer !== null) {

						switch (propName) {
							case 'src':
								const url = typeof value === 'string' ? value : value[0].src;
								src = url;

								// Only way is to destroy instance and all the events fired,
								// and create new one
								fbContainer.remove();
								fbContainer = document.createElement('div');
								fbContainer.id = fb.id;
								fbContainer.className = 'fb-video';
								fbContainer.setAttribute('data-href', url);
								fbContainer.setAttribute('data-allowfullscreen', 'true');
								fbContainer.setAttribute('data-controls', 'false');

								mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
								mediaElement.originalNode.style.display = 'none';

								FacebookApi.load({
									lang: fb.options.lang,
									id: fb.id
								});

								// This method reloads video on-demand
								FB.XFBML.parse();

								if (autoplay) {
									fbPlayer.play();
								}
								break;
							case 'currentTime':
								fbPlayer.seek(value);
								break;
							case 'muted':
								if (value) {
									fbPlayer.mute();
								} else {
									fbPlayer.unmute();
								}
								setTimeout(() => {
									const event = mejs.Utils.createEvent('volumechange', fb);
									mediaElement.dispatchEvent(event);
								}, 50);
								break;
							case 'volume':
								fbPlayer.setVolume(value);
								setTimeout(() => {
									const event = mejs.Utils.createEvent('volumechange', fb);
									mediaElement.dispatchEvent(event);
								}, 50);
								break;
							case 'readyState':
								const event = mejs.Utils.createEvent('canplay', fb);
								mediaElement.dispatchEvent(event);
								break;
							default:
								console.log('facebook ' + fb.id, propName, 'UNSUPPORTED property');
								break;
						}
					} else {
						// store for after "READY" event fires
						apiStack.push({type: 'set', propName: propName, value: value});
					}
				};

			}
		;

		for (let i = 0, total = props.length; i < total; i++) {
			assignGettersSetters(props[i]);
		}

		const
			methods = mejs.html5media.methods,
			assignMethods = (methodName) => {
				fb[methodName] = () => {
					if (fbPlayer !== null) {
						switch (methodName) {
							case 'play':
								return fbPlayer.play();
							case 'pause':
								return fbPlayer.pause();
							case 'load':
								return null;
						}
					} else {
						apiStack.push({type: 'call', methodName: methodName});
					}
				};
			}
		;

		for (let i = 0, total = methods.length; i < total; i++) {
			assignMethods(methods[i]);
		}

		/**
		 * Dispatch a list of events
		 *
		 * @private
		 * @param {Array} events
		 */
		function assignEvents (events) {
			for (let i = 0, total = events.length; i < total; i++) {
				const event = mejs.Utils.createEvent(events[i], fb);
				mediaElement.dispatchEvent(event);
			}
		}

		window['__ready__' + fb.id] = () => {
			FB.Event.subscribe('xfbml.ready', (msg) => {
				if (msg.type === 'video' && fb.id === msg.id) {
					mediaElement.fbPlayer = fbPlayer = msg.instance;

					// Set proper size since player dimensions are unknown before this event
					const
						fbIframe = document.getElementById(fb.id),
						width = fbIframe.offsetWidth,
						height = fbIframe.offsetHeight,
						events = ['mouseover', 'mouseout'],
						assignIframeEvents = (e) => {
							const event = mejs.Utils.createEvent(e.type, fb);
							mediaElement.dispatchEvent(event);
						}
					;

					fb.setSize(width, height);
					if (!mediaElement.originalNode.muted) {
						fbPlayer.unmute();
					}

					if (autoplay) {
						fbPlayer.play();
					}

					for (let i = 0, total = events.length; i < total; i++) {
						fbIframe.addEventListener(events[i], assignIframeEvents);
					}

					fb.eventHandler = {};

					// remove previous listeners
					const fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
					for (let i = 0, total = fbEvents.length; i < total; i++) {
						const
							event = fbEvents[i],
							handler = fb.eventHandler[event]
						;
						if (handler !== undefined && handler !== null &&
							!mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
							handler.removeListener(event);
						}
					}

					// do call stack
					if (apiStack.length) {
						for (let i = 0, total = apiStack.length; i < total; i++) {
							const stackItem = apiStack[i];

							if (stackItem.type === 'set') {
								const
									propName = stackItem.propName,
									capName = `${propName.substring(0, 1).toUpperCase()}${propName.substring(1)}`
								;

								fb[`set${capName}`](stackItem.value);

							} else if (stackItem.type === 'call') {
								fb[stackItem.methodName]();
							}
						}
					}

					assignEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);

					let timer;

					// Custom Facebook events
					fb.eventHandler.startedPlaying = fbPlayer.subscribe('startedPlaying', () => {
						if (!hasStartedPlaying) {
							hasStartedPlaying = true;
						}
						paused = false;
						ended = false;
						assignEvents(['play', 'playing', 'timeupdate']);

						// Workaround to update progress bar
						timer = setInterval(() => {
							fbPlayer.getCurrentPosition();
							assignEvents(['timeupdate']);
						}, 250);
					});
					fb.eventHandler.paused = fbPlayer.subscribe('paused', () => {
						paused = true;
						ended = false;
						assignEvents(['pause']);
					});
					fb.eventHandler.finishedPlaying = fbPlayer.subscribe('finishedPlaying', () => {
						paused = true;
						ended = true;

						assignEvents(['ended']);
						clearInterval(timer);
						timer = null;
					});
					fb.eventHandler.startedBuffering = fbPlayer.subscribe('startedBuffering', () => {
						assignEvents(['progress', 'timeupdate']);
					});
					fb.eventHandler.finishedBuffering = fbPlayer.subscribe('finishedBuffering', () => {
						assignEvents(['progress', 'timeupdate']);
					});


				}
			});
		};

		// Create fb <iframe> markup
		src = mediaFiles[0].src;
		let fbContainer = document.createElement('div');
		fbContainer.id = fb.id;
		fbContainer.className = 'fb-video';
		fbContainer.setAttribute('data-href', src);
		fbContainer.setAttribute('data-allowfullscreen', 'true');
		fbContainer.setAttribute('data-controls', !!mediaElement.originalNode.controls);
		mediaElement.originalNode.parentNode.insertBefore(fbContainer, mediaElement.originalNode);
		mediaElement.originalNode.style.display = 'none';

		FacebookApi.load({
			options: fb.options.facebook,
			id: fb.id
		});

		fb.hide = () => {
			fb.pause();
			if (fbPlayer) {
				fbContainer.style.display = 'none';
			}
		};
		fb.setSize = (width) => {
			if (fbPlayer !== null && !isNaN(width)) {
				fbContainer.style.width = width;
			}
		};
		fb.show = () => {
			if (fbPlayer) {
				fbContainer.style.display = '';
			}
		};

		fb.destroy = () => {
			if (poster) {
				mediaElement.originalNode.setAttribute('poster', poster);
			}
		};

		return fb;
	}
};

/**
 * Register Facebook type based on URL structure
 *
 */
mejs.Utils.typeChecks.push((url) => ~(url.toLowerCase()).indexOf('//www.facebook') ? 'video/x-facebook' : null);

mejs.Renderers.add(FacebookRenderer);
