'use strict';

import window from 'global/window';
import document from 'global/document';
import i18n from '../core/i18n';
import {config} from '../player';
import MediaElementPlayer from '../player';
import * as Features from '../utils/constants';
import {isString, createEvent} from '../utils/general';
import {addClass, removeClass} from '../utils/dom';
import {getTypeFromFile} from '../utils/media';


/**
 * Fullscreen button
 *
 * This feature creates a button to toggle fullscreen on video; it considers a letiety of possibilities when dealing with it
 * since it is not consistent across browsers. It also accounts for triggering the event through Flash shim.
 */

// Feature configuration
Object.assign(config, {
	/**
	 * @type {Boolean}
	 */
	usePluginFullScreen: true,
	/**
	 * @type {?String}
	 */
	fullscreenText: null,
	/**
	 * @type {Boolean}
	 */
	useFakeFullscreen: false
});

Object.assign(MediaElementPlayer.prototype, {
	/**
	 * @type {Boolean}
	 */
	isFullScreen: false,
	/**
	 * @type {Boolean}
	 */
	isNativeFullScreen: false,
	/**
	 * @type {Boolean}
	 */
	isInIframe: false,
	/**
	 * @type {Boolean}
	 */
	isPluginClickThroughCreated: false,
	/**
	 * Possible modes
	 * (1) 'native-native'  HTML5 video  + browser fullscreen (IE10+, etc.)
	 * (2) 'plugin-native'  plugin video + browser fullscreen (fails in some versions of Firefox)
	 * (3) 'fullwindow'     Full window (retains all UI)
	 *
	 * @type {String}
	 */
	fullscreenMode: '',
	/**
	 *
	 */
	containerSizeTimeout: null,

	/**
	 * Feature constructor.
	 *
	 * Always has to be prefixed with `build` and the name that will be used in MepDefaults.features list
	 * @param {MediaElementPlayer} player
	 */
	buildfullscreen (player)  {
		if (!player.isVideo) {
			return;
		}

		player.isInIframe = (window.location !== window.parent.location);

		player.detectFullscreenMode();

		const
			t = this,
			fullscreenTitle = isString(t.options.fullscreenText) ? t.options.fullscreenText : i18n.t('mejs.fullscreen'),
			fullscreenBtn = document.createElement('div')
		;

		fullscreenBtn.className = `${t.options.classPrefix}button ${t.options.classPrefix}fullscreen-button`;
		fullscreenBtn.innerHTML = `<button type="button" aria-controls="${t.id}" title="${fullscreenTitle}" aria-label="${fullscreenTitle}" tabindex="0"></button>`;
		t.addControlElement(fullscreenBtn, 'fullscreen');

		fullscreenBtn.addEventListener('click', () => {
			// toggle fullscreen
			const isFullScreen = (Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN) || player.isFullScreen;

			if (isFullScreen) {
				player.exitFullScreen();
			} else {
				player.enterFullScreen();
			}
		});

		player.fullscreenBtn = fullscreenBtn;

		t.options.keyActions.push({
			keys: [70], // F
			action: (player, media, key, event) => {
				if (!event.ctrlKey) {
					if (typeof player.enterFullScreen !== 'undefined') {
						if (player.isFullScreen) {
							player.exitFullScreen();
						} else {
							player.enterFullScreen();
						}
					}
				}
			}
		});

		t.exitFullscreenCallback = (e) => {
			const key = e.which || e.keyCode || 0;
			if (t.options.enableKeyboard && key === 27 && ((Features.HAS_TRUE_NATIVE_FULLSCREEN && Features.IS_FULLSCREEN) || t.isFullScreen)) {
				player.exitFullScreen();
			}
		};

		t.globalBind('keydown', t.exitFullscreenCallback);

		t.normalHeight = 0;
		t.normalWidth = 0;

		// setup native fullscreen event
		if (Features.HAS_TRUE_NATIVE_FULLSCREEN) {
			/**
			 * Detect any changes on fullscreen
			 *
			 * Chrome doesn't always fire this in an `<iframe>`
			 * @private
			 */
			const fullscreenChanged = () => {
				if (/TBS\/\d+/g.test(navigator.userAgent) && e && e.type === 'x5videoenterfullscreen') {
					player.isFullScreen = true;
					player.isNativeFullScreen = true;
					player.setControlsSize();
					player.enterFullScreen();
				} else if (/TBS\/\d+/g.test(navigator.userAgent) && e && e.type === 'x5videoexitfullscreen') {
					player.isFullScreen = false;
					player.isNativeFullScreen = false;
					player.exitFullScreen();
				} else if (player.isFullScreen) {
					if (Features.isFullScreen()) {
						player.isNativeFullScreen = true;
						// reset the controls once we are fully in full screen
						player.setControlsSize();
					} else {
						player.isNativeFullScreen = false;
						// when a user presses ESC
						// make sure to put the player back into place
						player.exitFullScreen();
					}
				}
			};

			player.globalBind(Features.FULLSCREEN_EVENT_NAME, fullscreenChanged);
			if (/TBS\/\d+/g.test(navigator.userAgent) && player.domNode) {
				player.domNode.addEventListener('x5videoenterfullscreen', fullscreenChanged);
				player.domNode.addEventListener('x5videoexitfullscreen', fullscreenChanged);
			}
		}
	},
	cleanfullscreen (player)  {
		player.exitFullScreen();
		player.globalUnbind('keydown', player.exitFullscreenCallback);
	},

	/**
	 * Detect the type of fullscreen based on browser's capabilities
	 *
	 * @return {String}
	 */
	detectFullscreenMode ()  {
		const
			t = this,
			isNative = t.media.rendererName !== null && /(native|html5)/i.test(t.media.rendererName)
		;

		let mode = '';

		if (Features.HAS_TRUE_NATIVE_FULLSCREEN && isNative) {
			mode = 'native-native';
		} else if (Features.HAS_TRUE_NATIVE_FULLSCREEN && !isNative) {
			mode = 'plugin-native';
		} else if (t.usePluginFullScreen && Features.SUPPORT_POINTER_EVENTS) {
			mode = 'plugin-click';
		}

		t.fullscreenMode = mode;
		return mode;
	},

	/**
	 *
	 */
	enterFullScreen ()  {
		const
			t = this,
			isNative = t.media.rendererName !== null && /(html5|native)/i.test(t.media.rendererName),
			containerStyles = getComputedStyle(t.getElement(t.container))
		;

		if (!t.isVideo) {
			return;
		}

		// iOS allows playing fullscreen ONLY on `video` tag, so check if the source can go fullscreen on iOS
		// and if the player can play the current source
		if (t.options.useFakeFullscreen === false && Features.IS_IOS && Features.HAS_IOS_FULLSCREEN &&
			typeof t.media.originalNode.webkitEnterFullscreen === 'function' &&
			t.media.originalNode.canPlayType(getTypeFromFile(t.media.getSrc()))) {
			t.media.originalNode.webkitEnterFullscreen();
			return;
		}

		// set it to not show scroll bars so 100% will work
		addClass(document.documentElement, `${t.options.classPrefix}fullscreen`);
		addClass(t.getElement(t.container), `${t.options.classPrefix}container-fullscreen`);

		// store sizing
		t.normalHeight = parseFloat(containerStyles.height);
		t.normalWidth = parseFloat(containerStyles.width);

		// attempt to do true fullscreen
		if (t.fullscreenMode === 'native-native' || t.fullscreenMode === 'plugin-native') {
			Features.requestFullScreen(t.getElement(t.container));

			if (t.isInIframe) {
				// sometimes exiting from fullscreen doesn't work
				// notably in Chrome <iframe>. Fixed in version 17
				setTimeout(function checkFullscreen () {

					if (t.isNativeFullScreen) {
						let percentErrorMargin = 0.002, // 0.2%
							windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
							screenWidth = screen.width,
							absDiff = Math.abs(screenWidth - windowWidth),
							marginError = screenWidth * percentErrorMargin;

						// check if the video is suddenly not really fullscreen
						if (absDiff > marginError) {
							// manually exit
							t.exitFullScreen();
						} else {
							// test again
							setTimeout(checkFullscreen, 500);
						}
					}
				}, 1000);
			}
		}

		// make full size
		t.getElement(t.container).style.width = '100%';
		t.getElement(t.container).style.height = '100%';

		// Only needed for safari 5.1 native full screen, can cause display issues elsewhere
		// Actually, it seems to be needed for IE8, too
		t.containerSizeTimeout = setTimeout(() => {
			t.getElement(t.container).style.width = '100%';
			t.getElement(t.container).style.height = '100%';
			t.setControlsSize();
		}, 500);

		if (isNative) {
			t.node.style.width = '100%';
			t.node.style.height = '100%';
		} else {
			const elements = t.getElement(t.container).querySelectorAll('embed, object, video'), total = elements.length;
			for (let i = 0; i < total; i++) {
				elements[i].style.width = '100%';
				elements[i].style.height = '100%';
			}
		}

		if (t.options.setDimensions && typeof t.media.setSize === 'function') {
			t.media.setSize(screen.width, screen.height);
		}

		const layers = t.getElement(t.layers).children, total = layers.length;
		for (let i = 0; i < total; i++) {
			layers[i].style.width = '100%';
			layers[i].style.height = '100%';
		}

		if (t.fullscreenBtn) {
			removeClass(t.fullscreenBtn, `${t.options.classPrefix}fullscreen`);
			addClass(t.fullscreenBtn, `${t.options.classPrefix}unfullscreen`);
		}

		t.setControlsSize();
		t.isFullScreen = true;

		const
			zoomFactor = Math.min(screen.width / t.width, screen.height / t.height),
			captionText = t.getElement(t.container).querySelector(`.${t.options.classPrefix}captions-text`)
		;
		if (captionText) {
			captionText.style.fontSize = `${(zoomFactor * 100)}%`;
			captionText.style.lineHeight = 'normal';
			t.getElement(t.container).querySelector(`.${t.options.classPrefix}captions-position`).style.bottom =
				`${(((screen.height - t.normalHeight) / 2) - (t.getElement(t.controls).offsetHeight / 2) + zoomFactor + 15)}px`;
		}
		const event = createEvent('enteredfullscreen', t.getElement(t.container));
		t.getElement(t.container).dispatchEvent(event);
	},

	/**
	 *
	 */
	exitFullScreen ()  {
		const
			t = this,
			isNative = t.media.rendererName !== null && /(native|html5)/i.test(t.media.rendererName)
		;

		if (!t.isVideo) {
			return;
		}

		// Prevent container from attempting to stretch a second time
		clearTimeout(t.containerSizeTimeout);

		// come out of native fullscreen
		if (Features.HAS_TRUE_NATIVE_FULLSCREEN && (Features.IS_FULLSCREEN || t.isFullScreen)) {
			Features.cancelFullScreen();
		}

		// restore scroll bars to document
		removeClass(document.documentElement, `${t.options.classPrefix}fullscreen`);
		removeClass(t.getElement(t.container), `${t.options.classPrefix}container-fullscreen`);

		if (t.options.setDimensions) {
			t.getElement(t.container).style.width = `${t.normalWidth}px`;
			t.getElement(t.container).style.height = `${t.normalHeight}px`;

			if (isNative) {
				t.node.style.width = `${t.normalWidth}px`;
				t.node.style.height = `${t.normalHeight}px`;
			} else {
				const elements = t.getElement(t.container).querySelectorAll('embed, object, video'), total = elements.length;
				for (let i = 0; i < total; i++) {
					elements[i].style.width = `${t.normalWidth}px`;
					elements[i].style.height = `${t.normalHeight}px`;
				}
			}

			if (typeof t.media.setSize === 'function') {
				t.media.setSize(t.normalWidth, t.normalHeight);
			}

			const layers = t.getElement(t.layers).children, total = layers.length;
			for (let i = 0; i < total; i++) {
				layers[i].style.width = `${t.normalWidth}px`;
				layers[i].style.height = `${t.normalHeight}px`;
			}
		}

		if (t.fullscreenBtn) {
			removeClass(t.fullscreenBtn, `${t.options.classPrefix}unfullscreen`);
			addClass(t.fullscreenBtn, `${t.options.classPrefix}fullscreen`);
		}

		t.setControlsSize();
		t.isFullScreen = false;

		const captionText = t.getElement(t.container).querySelector(`.${t.options.classPrefix}captions-text`);
		if (captionText) {
			captionText.style.fontSize = '';
			captionText.style.lineHeight = '';
			t.getElement(t.container).querySelector(`.${t.options.classPrefix}captions-position`).style.bottom = '';
		}
		const event = createEvent('exitedfullscreen', t.getElement(t.container));
		t.getElement(t.container).dispatchEvent(event);
	}
});
