import screenfull from 'screenfull'
import { Screenfull } from 'screenfull'
import { Injectable } from '../decorators'

@Injectable('fullscreenService')
export default class FullscreenService {

	private fullscreenChangeHandlers: FullscreenChangeFunction[] = []

	constructor() {
		if (screenfull.isEnabled) {
			screenfull.on('change', () => {
				const isFullscreen = this.isFullscreen()
				this.fullscreenChangeHandlers.forEach(handler => {
					handler(isFullscreen)
				})
			})
		}
	}

	cancelFullscreen(): void {
		if (!this.isFullscreen()) { return }

		(screenfull as Screenfull).exit()
	}

	displayFullscreen(element?: Element): void {
		(screenfull as Screenfull).request(element)
	}

	getFullscreenElement(): Element | null {
		return (screenfull as Screenfull).element
	}

	inIframe(): boolean {
		try {
			return window.self !== window.top
		} catch (e) {
			return true
		}
	}

	isFullscreen(): boolean {
		return (screenfull as Screenfull).isFullscreen
	}

	onFullscreenChange(callback: FullscreenChangeFunction): () => void {
		// Register the handler
		this.fullscreenChangeHandlers.push(callback)

		// Return a function that will deregister the handler
		return () => {
			this.fullscreenChangeHandlers = this.fullscreenChangeHandlers.slice(0).filter(handler => handler !== callback)
		}
	}

	supportsFullscreen(): boolean {
		return (screenfull as Screenfull).isEnabled
	}
}

type FullscreenChangeFunction = (isFullscreen: boolean) => void