import m from 'mithril';

require("./layout.css");

import ExpandIcon from 'assets/icons/expand.png';
import CompressIcon from 'assets/icons/compress.png';

export default class Layout {
	private menuActive = false;
	private drawCount = 0;
	private isFullscreen = false;
	
	fullscreen(fullscreen: boolean) {
		if(fullscreen) {
			let elem = document.documentElement as any;
			if (elem.requestFullscreen) {
				elem.requestFullscreen();
			} else if (elem.webkitRequestFullscreen) { /* Safari */
				elem.webkitRequestFullscreen();
			} else if (elem.msRequestFullscreen) { /* IE11 */
				elem.msRequestFullscreen();
			}
		}
		else {
			let doc = document as any;
			if (doc.exitFullscreen) {
				doc.exitFullscreen();
			} else if (doc.webkitExitFullscreen) { /* Safari */
				doc.webkitExitFullscreen();
			} else if (doc.msExitFullscreen) { /* IE11 */
				doc.msExitFullscreen();
			}
			setTimeout(() => {
				window.scrollTo(0, 0);
			}, 500);
		}
		this.isFullscreen = fullscreen;
	}
	
	toggleFullscreen() {
		this.fullscreen(!this.isFullscreen);
	}
	
	view(vnode: m.Vnode) {
		this.drawCount = this.drawCount + 1;
		
		return [
			<nav class="navbar" role="navigation" aria-label="main navigation">
				<div class="navbar-brand">
					<a class="navbar-item" href="#!/dashboard" onclick={() => { this.menuActive = false; return true; }}>Tableau de bord</a>
					<a class="navbar-item" onclick={() => { this.toggleFullscreen(); }}><img class="img-icon" src={this.isFullscreen ? CompressIcon : ExpandIcon}></img></a>
					
					<a role="button" class={'navbar-burger ' + (this.menuActive ? 'is-active' : '')} onclick={() => this.menuActive = !this.menuActive} aria-label="menu" aria-expanded="false" data-target="mainMenu">
						<span aria-hidden="true"></span>
						<span aria-hidden="true"></span>
						<span aria-hidden="true"></span>
					</a>
					
					<span>{this.drawCount}</span>
				</div>
			
				<div id="mainMenu" class={'navbar-menu ' + (this.menuActive ? 'is-active' : '')}>
					<div class="navbar-start" onclick={() => { this.menuActive = false; return true; }}>
						<a class="navbar-item" href='#!/raw'>Données brutes</a>
					</div>
				</div>
			</nav>,
			
			<section>
				{vnode.children}
			</section>
		];
	}
}
