import { h } from 'hyperapp';

export const TopBar = ({ state, switchSettings }) =>
    <section id="topbar" class="topbar">
        <img alt="" class="topbar_logo" src={require('../../../img/ui/turtle-logo.svg')} />
        <div class="topbar_indicators">
            <IndicatorBattery batteryLevel={state.batteryLevel} />
            <IndicatorSignal signalLevel={state.signalLevel} />
        </div>
        <div id="topbar_actions" class="topbar_actions">
            {/* <img class="topbar_actions_action" id="button-screenrecord" src={require("../../../img/ui/nav-bar-rec.svg")}/> */}
            {/* <a id="snap-download-a">  */}
            {/* <img class="topbar_actions_action" id="button-screenshot" src={require("../../../img/ui/nav-bar-snap.svg")}/> */}
            {/* </a>  */}
            <ActionFullscreen />
        </div>

        <div role="button" class="topbar_menu" onmousedown={() => switchSettings()}>
            <div class="topbar_menu_bar" />
        </div>
    </section>;

const IndicatorBattery = ({ batteryLevel }) =>
    <img alt="" id="indicator-battery" class="topbar_indicators_indicator" src={batteryLevelIcon(batteryLevel)} />;

const IndicatorSignal = ({ signalLevel }) =>
    <img alt="" id="indicator-signal" class="topbar_indicators_indicator" src={signalLevelIcon(signalLevel)} />;


const batteryLevelIcon = (batteryLevel) => {
    if ((batteryLevel >= 19.5) === (batteryLevel < 21.5)) {
        return require('../../../img/ui/battery-1.svg');
    } else if ((batteryLevel >= 21.5) === (batteryLevel < 23)) {
        return require('../../../img/ui/battery-2.svg');
    } else if ((batteryLevel >= 23) === (batteryLevel < 24)) {
        return require('../../../img/ui/battery-3.svg');
    } else if (batteryLevel >= 24) {
        return require('../../../img/ui/battery-4.svg');
    } else {
        return require('../../../img/ui/battery-0.svg');
    }
};

const signalLevelIcon = (signalLevel) => {
    if ((signalLevel >= 80) === (signalLevel < 85)) {
        return require('../../../img/ui/signal-1.svg');
    } else if ((signalLevel >= 85) === (signalLevel < 90)) {
        return require('../../../img/ui/signal-2.svg');
    } else if ((signalLevel >= 90) === (signalLevel < 95)) {
        return require('../../../img/ui/signal-3.svg');
    } else if (signalLevel >= 95) {
        return require('../../../img/ui/signal-4.svg');
    } else {
        return require('../../../img/ui/signal-0.svg');
    }
};

const ActionFullscreen = () =>
    <img
        alt=""
        class="topbar_actions_action"
        id="button-fullscreen"
        src={require('../../../img/ui/nav-bar-fullscreen.svg')}
        onmouseup={(el) => toggleFullscreen(el.target)}
    />;


const toggleFullscreen = () => {
    const main = document.documentElement;
    if (!document.fullscreenElement) {
        if (main.mozRequestFullScreen) {
            main.mozRequestFullScreen();
        } else {
            main.webkitRequestFullScreen();
        }
    } else {
        document.exitFullscreen();
        if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
};

@@ -2665,17 +2665,20 @@
 seup=%7B(e
-l
+vent
 ) =%3E tog
@@ -2696,15 +2696,11 @@
 en(e
-l.targe
+ven
 t)%7D%0A
@@ -2705,24 +2705,69 @@
 %7D%0A    /%3E;%0A%0A%0A
+// https://gist.github.com/demonixis/5188326%0A
 const toggle
@@ -2776,24 +2776,29 @@
 llscreen = (
+event
 ) =%3E %7B%0A    c
@@ -2804,255 +2804,417 @@
 cons
-t main = document.documentElement;%0A    if (!document.fulls
+ole.log(event);%0A%0A    let element = document.body;%0A    if (event instanceof window.HTMLElement) %7B%0A        element = event;%0A    %7D%0A%0A    const isFullscreen = document.webkitIsFullS
 creen
-Element) %7B%0A        if (main.mozRequestFullScreen) %7B%0A            main.mozRequestFullScreen();%0A        %7D else %7B%0A            main.webkitRequestFullScreen();%0A        %7D%0A    %7D else %7B%0A       
+ %7C%7C document.mozFullScreen %7C%7C false;%0A%0A    element.requestFullScreen = element.requestFullScreen %7C%7C element.webkitRequestFullScreen %7C%7C element.mozRequestFullScreen %7C%7C function () %7B return false; %7D;%0A    document.cancelFullScreen =
  doc
@@ -3223,38 +3223,28 @@
 ent.
-exit
+cancel
 Full
-s
+S
 creen
-();%0A        if (
+ %7C%7C 
 docu
@@ -3240,35 +3240,38 @@
 een %7C%7C document.
-moz
+webkit
 CancelFullScreen
@@ -3266,39 +3266,27 @@
 elFullScreen
-) %7B%0A           
+ %7C%7C
  document.mo
@@ -3306,100 +3306,113 @@
 reen
-();%0A        %7D else if (document.webkitExit
+ %7C%7C function () %7B return false; %7D;%0A%0A    isFullscreen ? document.cancel
 Full
-s
+S
 creen
+(
 ) 
-%7B%0A            document.webkitExi
+: element.reques
 tFull
-s
+S
 cree
@@ -3420,23 +3420,7 @@
 ();%0A
-        %7D%0A    %7D%0A
 %7D;%0A

fix toggle fullscreen