// reactive component for displaying the menu 
XRFMENU = {

  html: `
    <div id="overlay" class="xrf">
      <div class="logo" ></div>
      <button id="navback"  onclick="history.back()">&lt;</button>
      <button id="navforward" onclick="history.forward()">&gt;</button>
      <input id="load" type="submit" value="load 3D file"></input>
      <input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )" style="display:none"/> 
    </div>
    <div class="xrf footer">
      <div class="menu">
        <div id="buttons"></div>
        <a class="btn" id="more" onclick="XRFMENU.toggle()"></a><br>
      </div>
    </div>
  `,

  init: (el) => new Proxy({
    morelabel:  '⚡',
    collapsed:    false,
    logo:       './../../assets/logo.png',
    buttons:    [`<a class="btn" aria-label="button" aria-description="share URL/screenshot/embed"  id="share"   onclick="XRFMENU.share()">🔗 share</a><br>`],

    $overlay: $overlay = el.querySelector('#overlay'),
    $logo:    $logo    = el.querySelector('.logo'),
    $uri:     $uri     = el.querySelector('#uri'),
    $buttons: $buttons = el.querySelector('#buttons'),
    $btnMore: $btnMore = el.querySelector('#more'),

    toggle:   () => XRFMENU.collapsed = !XRFMENU.collapsed,
    install:  (opts) => {
      XRFMENU.bindToWindow() // bind functions like notify to window 
      window.notify('loading '+document.location.search.substr(1))
      document.body.appendChild(el)
      document.dispatchEvent( new CustomEvent("XRFMENU:ready", {detail: opts}) )
    }

  },{

    get(data,k,v){ return data[k] },
    set(data,k,v){ 
      data[k] = v    
      switch( k ){
        case "logo":       $logo.style.backgroundImage = `url(${v})`;     break;
        case "css":        document.head.innerHTML += v;                  break;
        case "morelabel":  $btnMore.innerText = data.morelabel;           break;
        case "buttons":    $buttons.innerHTML = this.renderButtons(data); break;
        case "collapsed":  $overlay.style.display = data.collapsed ? 'block' : 'none'
                           $buttons.style.display = data.collapsed ? 'block' : 'none'
                           break;
      }
    },

    renderButtons: (data) => `${data.buttons.join('')}`

  })
}

// reactify component!
$xrfmenu = document.createElement('div')
$xrfmenu.innerHTML = XRFMENU.html
XRFMENU = XRFMENU.init($xrfmenu)


// here come all menu functions which are less related to rendering 
let utils = {

  bindToWindow(opts){

    window.notify   = XRFMENU.notify(window)

    // reroute console messages to snackbar notifications
    console.log = ( (log) => function(str){
      if( String(str).match(/(:.*#|note:)/) ) window.notify(str)
      log(str)
    })(console.log)
    // allow iframe to open url
    window.addEventListener('message', (event) => {
      if (event.data && event.data.url) {
        window.open(event.data.url, '_blank');
      }
    });
  },
      
  loadFile(contentLoaders, multiple){
    return () => {
      window.notify("if you're on Meta browser, file-uploads might be disabled")
      let input = document.createElement('input');
      input.type = 'file';
      input.multiple = multiple;
      input.accept = Object.keys(contentLoaders).join(",");
      input.onchange = () => {
          let files = Array.from(input.files);
          let file = files.slice ? files[0] : files 
          for( var i in contentLoaders ){
            let r = new RegExp('\\'+i+'$')
            if( file.name.match(r) ) return contentLoaders[i](file)
          }
          alert(file.name+" is not supported")
      };
      input.click();
    }
  },

  SnackBar(userOptions) {
      var snackbar = this || (window.snackbar = {});
      var _Interval;
      var _Message;
      var _Element;
      var _Container;
      
      var _OptionDefaults = {
          message: "Operation performed successfully.",
          dismissible: true,
          timeout: 7000,
          status: ""
      }
      var _Options = _OptionDefaults;

      function _Create() {
          _Container = document.querySelector(".js-snackbar-container") 
          if( _Container ){
            _Container.remove()
          }
          _Container = null

          if (!_Container) {
              // need to create a new container for notifications
              _Container = document.createElement("div");
              _Container.classList.add("js-snackbar-container");

              document.body.appendChild(_Container);
          }
          _Container.opts = _Options
          _Container.innerHTML = ''
          _Element = document.createElement("div");
          _Element.classList.add("js-snackbar__wrapper","xrf");

          let innerSnack = document.createElement("div");
          innerSnack.classList.add("js-snackbar", "js-snackbar--show");
      
          if (_Options.status) {
              _Options.status = _Options.status.toLowerCase().trim();

              let status = document.createElement("span");
              status.classList.add("js-snackbar__status");


              if (_Options.status === "success" || _Options.status === "green") {
                  status.classList.add("js-snackbar--success");
              }
              else if (_Options.status === "warning" || _Options.status === "alert" || _Options.status === "orange") {
                  status.classList.add("js-snackbar--warning");
              }
              else if (_Options.status === "danger" || _Options.status === "error" || _Options.status === "red") {
                  status.classList.add("js-snackbar--danger");
              }
              else {
                  status.classList.add("js-snackbar--info");
              }

              innerSnack.appendChild(status);
          }
          
          _Message = document.createElement("span");
          _Message.classList.add("js-snackbar__message");
          if( typeof _Options.message == 'string' ){
            _Message.innerHTML = _Options.message;
          }else _Message.appendChild(_Options.message)

          innerSnack.appendChild(_Message);

          if (_Options.dismissible) {
              let closeBtn = document.createElement("span");
              closeBtn.classList.add("js-snackbar__close");
              closeBtn.innerText = "\u00D7";

              closeBtn.onclick = snackbar.Close;

              innerSnack.appendChild(closeBtn);
          }

          _Element.style.height = "0px";
          _Element.style.opacity = "0";
          _Element.style.marginTop = "0px";
          _Element.style.marginBottom = "0px";

          _Element.appendChild(innerSnack);
          _Container.appendChild(_Element);

          if (_Options.timeout !== false) {
              _Interval = setTimeout(snackbar.Close, _Options.timeout);
          }
      }

      snackbar.Open = function() {
          let contentHeight = _Element.firstElementChild.scrollHeight; // get the height of the content

          _Element.style.height = contentHeight + "px";
          _Element.style.opacity = 1;
          _Element.style.marginTop = "5px";
          _Element.style.marginBottom = "5px";

          _Element.addEventListener("transitioned", function() {
              _Element.removeEventListener("transitioned", arguments.callee);
              _Element.style.height = null;
          })
      }

      snackbar.Close = function () {
          if (_Interval)
              clearInterval(_Interval);

          let snackbarHeight = _Element.scrollHeight; // get the auto height as a px value
          let snackbarTransitions = _Element.style.transition;
          _Element.style.transition = "";

          requestAnimationFrame(function() {
              _Element.style.height = snackbarHeight + "px"; // set the auto height to the px height
              _Element.style.opacity = 1;
              _Element.style.marginTop = "0px";
              _Element.style.marginBottom = "0px";
              _Element.style.transition = snackbarTransitions

              requestAnimationFrame(function() {
                  _Element.style.height = "0px";
                  _Element.style.opacity = 0;
              })
          });

          setTimeout(function() {
              try { 
                _Container.removeChild(_Element); 
              } catch (e) { }
          }, 1000);
      };

      _Options = { ..._OptionDefaults, ...userOptions }
      _Create();
      snackbar.Open();
  },

  notify(scope){
    return function notify(str,opts){
      opts = opts || {status:'info'}        
      opts = Object.assign({ status, timeout:4000 },opts)
      if( typeof str == 'string' ){
        if( !opts.status ){      
          if( str.match(/error/g)   ) opts.status = "danger"
          if( str.match(/warning/g) ) opts.status = "warning"
        }
      }
      opts.message = str
      window.XRFMENU.SnackBar( opts )
    }
  },

  download(){
    function fetchAndDownload(dataurl, filename) {
      var a = document.createElement("a");
      a.href = dataurl;
      a.setAttribute("download", filename);
      a.click();
      return false;
    }
    let file = document.location.search.replace(/\?/,'')
    fetchAndDownload( file, file )
  },

  updateHashPosition(randomize){
    // *TODO* this should be part of the XRF Threejs framework
    if( typeof THREE == 'undefined' ) THREE = xrf.THREE 
    let radToDeg  = THREE.MathUtils.radToDeg
    let toDeg     = (x) => x / (Math.PI / 180)
    let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
    camera.position.x += Math.random()/10
    camera.position.z += Math.random()/10

    // *TODO* add camera direction
    let direction = new xrf.THREE.Vector3()
    camera.getWorldDirection(direction)
    const pitch   = Math.asin(direction.y);
    const yaw     = Math.atan2(direction.x, direction.z);
    const pitchInDegrees = pitch * 180 / Math.PI;
    const yawInDegrees = yaw * 180 / Math.PI;

    let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
    let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
    newHash += `&${lastPos}`
    document.location.hash = newHash.replace(/&&/,'&')
                                    .replace(/#&/,'')
    XRFMENU.copyToClipboard( window.location.href );
  },

  copyToClipboard(text){
    // copy url to clipboard 
    var dummy = document.createElement('input')
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand('copy');
    document.body.removeChild(dummy); 
  },

  share(){
    let inMeeting = $('[meeting]')
    let url = window.location.href
    if( !inMeeting ) XRFMENU.updateHashPosition()
    else url = $('[meeting]').components['meeting'].data.link
    XRFMENU.copyToClipboard( url )
    // End of *TODO* 
    window.notify(`<h2>${ inMeeting ? 'Meeting link ' : 'Link'} copied to clipboard!</h2> <br>Now share it with your friends ❤️<br>
      <canvas id="qrcode" width="121" height="121"></canvas><br>
      <button onclick="XRFMENU.download()">💾 download scene file</button> <br>
      <button onclick="alert('this might take a while'); $('a-scene').components.screenshot.capture('equirectangular')">📷 download 360 screenshot</button> <br>
      <a class="btn" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">🖥 clone & selfhost this experience</a><br>
      <br>
      To embed this experience in your blog,<br>
      copy/paste the following into your HTML:<br><input type="text" value="&lt;iframe src='${document.location.href}'&gt;<br>&lt;/iframe&gt;" id="share"/>
      <br>
    `,{timeout:2000000})
    // draw QR code
    setTimeout( () => {
      let QR  = window.QR
      QR.canvas = document.getElementById('qrcode')
      QR.draw( url, QR.canvas )
    },0)
  }
}

// map to component
for( let i in utils ) XRFMENU[i] = utils[i]

//$('a-scene').addEventListener('XRF', this.onXRFready )
//    
//    if( document.location.search.length > 2 ){
//      $('[xrf]').setAttribute('xrf', document.location.search.substr(1)+document.location.hash )
//    }
//
//  },
//
//  onXRFready: function(){
//
//    let XRF = window.AFRAME.XRF
//    //setupMenu(XRF){
//    //  let aScene   = document.querySelector('a-scene')
//    //  let urlbar   = $('input#uri')
//    //  let inIframe = window.location !== window.parent.location
//    //  let els      = [ ...document.querySelectorAll('.menu .btn') ]
//    //  els          = els.filter( (el) => el.id != "more" ? el : false )
//
//    //  // enable meetings
//    //  let startMeeting = () => {
//    //    aScene.setAttribute('meeting', 'id: xrfragments') 
//    //    $('a#meeting').innerText = '🧑‍🤝‍🧑 breakout meeting'
//    //    $('a#meeting').setAttribute('aria-description','breakout room')
//    //  }
//    //  $('a#meeting').addEventListener('click', () => {
//    //    if( aScene.getAttribute('meeting') ){ // meeting already, start breakout room
//    //      let parentRoom = document.location.href
//    //      XRFMENU.updateHashPosition(true) 
//    //      let meeting = $('[meeting]').components['meeting']
//    //      meeting.data.parentRoom = parentRoom
//    //      meeting.update()
//    //    }else startMeeting()
//    //  })
//    //  if( document.location.hash.match(/(#|&)meet/) ) startMeeting()
//
//    //  XRF.addEventListener('hash', () => reflectUrl() )
//    //  const reflectUrl = window.reflectUrl = (url) => {
//    //    urlbar.value = url || document.location.search.substr(1) + document.location.hash
//    //  }
//    //  reflectUrl()
//    //},
//
//
//    // on localhost enable debugging mode for developer convenience
//    let loc = document.location
//    if( loc.host.match(/^localhost/) ){
//      $('a-scene').setAttribute('stats')
//      XRF.debug = 1
//    }
//
//    // add screenshot component with camera to capture bigger size equirects
//    // document.querySelector('a-scene').components.screenshot.capture('perspective')
//    $('a-scene').setAttribute("screenshot",{camera: "[camera]",width: 4096*2, height:2048*2})
//
//    if( window.outerWidth > 800 )
//      setTimeout( () => window.notify("use WASD-keys and mouse-drag to move around",{timeout:false}),2000 )
//
//    window.AFRAME.XRF.addEventListener('href', (data) => data.selected ? window.notify(`href: ${data.xrf.string}`) : false )
//
//    // enable user-uploaded asset files
//    let fileLoaders = XRFMENU.loadFile({
//      ".gltf": (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) ),
//      ".glb":  (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) )
//    })
//    $("#overlay > input[type=submit]").addEventListener("click", fileLoaders )


// finally add some css 
XRFMENU.css = `
  <style type="text/css">
    :root {
        --xrf-primary: #6839dc;
        --xrf-primary-fg: #FFF;
        --xrf-light-primary: #ea23cf;
        --xrf-secondary: #872eff;
        --xrf-light-xrf-secondary: #ce7df2;
        --xrf-overlay-bg: #fffb;
        --xrf-box-shadow: #0005;
        --xrf-red: red;
        --xrf-black: #424280;
        --xrf-white: #fdfdfd;
        --xrf-dark-gray: #343334;
        --xrf-gray: #ecf7ff47;
        --xrf-light-gray: #efefef;
        --xrf-lighter-gray: #e4e2fb96;
        --xrf-font-sans-serif: system-ui, -apple-system, segoe ui, roboto, ubuntu, helvetica, cantarell, noto sans, sans-serif;
        --xrf-font-monospace: menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace, serif;
        --xrf-font-size-1: 14px;
        --xrf-font-size-2: 17px;
        --xrf-font-size-3: 21px;
    }

    .xrf table tr td{
      vertical-align:top;
    }
    .xrf table tr td:nth-child(1){
      padding-right:35px;
    }

    .xrf button,
    .xrf input[type="submit"],
    .xrf .btn {
      text-decoration:none;
      background: var(--xrf-primary);
      border: 0;
      border-radius: 25px;
      padding: 11px 15px;
      font-weight: bold;  
      transition: 0.3s;
      height: 32px;
      font-size: var(--xrf-font-size-1);
      color: var(--xrf-primary-fg);
      line-height: var(--xrf-font-size-1);
      cursor:pointer;
      white-space:pre;
      min-width: 45px;
      box-shadow: 0px 0px 10px var(--xrf-box-shadow);
    }

    .xrf button:hover,
    .xrf input[type="submit"]:hover,
    .xrf .btn:hover {
      background: var(--xrf-secondary);
    }

    .xrf, .xrf *{
      font-family: var(--xrf-font-sans-serif);
      font-size: var(--xrf-font-size-1);
      line-height:27px;
    }

    textarea, select, input[type="text"] {
      background: transparent; /* linear-gradient( var(--xrf-lighter-gray), var(--xrf-gray) ) !important; */
    }

    input[type="submit"] {
      color: var(--xrf-light-gray);
    }

    input[type=text]{
      padding:7px 15px;
    }
    input{
      border-radius:7px;
      margin:5px 0px;
    }

    .title {
      border-bottom: 2px solid var(--xrf-secondary);
      padding-bottom: 20px;
    }

    #overlay{
      background: var(--xrf-overlay-bg);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 48px;
      box-shadow: 0px 0px 10px var(--xrf-box-shadow);
      opacity: 0.9;
      z-index:2000;
    }

    #overlay .logo{
      width: 92px;
      position: absolute;
      top: 9px;
      left: 93px;
      height: 30px;
      background-size: contain;
      background-repeat: no-repeat;
    }

    #overlay > input[type="submit"] {
      height: 32px;
      position: absolute;
      right: 20px;
      top: 2px;
    }

    #overlay > button#navback,
    #overlay > button#navforward {
      height: 32px;
      font-size: var(--xrf-font-size-1);
      position: absolute;
      left: 9px;
      padding: 2px 13px;
      border-radius:6px;
      top: 8px;
      color: var(--xrf-light-gray);
      width: 36px;
      min-width: unset;
    }
    #overlay > button#navforward {
      left:49px;
    }

    #overlay > #uri {
        height: 18px;
        font-size: var(--xrf-font-size-3);
        position: absolute;
        left: 200px;
        top: 9px;
        max-width: 550px;
        padding: 5px 0px 5px 5px;
        width: calc( 63% - 200px);
        background: #f0f0f0;
        border-color: #Ccc;
        border: 2px solid #CCC;
        border-radius: 7px;
        color: #555;
    }



    .menu .btn{
      display:inline-block;
      background: var(--xrf-primary);
      border-radius: 25px;
      border: 0;
      padding: 5px 19px;
      font-weight: 1000;
      font-family: sans-serif;
      font-size: var(--xrf-font-size-2);
      color:var(--xrf-primary-fg);
      height:33px;
      z-index:2000;
      cursor:pointer;
      min-width:107px;
      text-decoration:none;
      margin-top: 15px;
      line-height:36px;
      margin-right:10px;
      text-align:left;
    }

    .xrf a.btn#more{
      width: 19px;
      min-width: 19px;
      font-size:16px;
      text-align: center;
      background:white;
      color: var(--xrf-primary);
    }

    html{
      max-width:unset;
    }

    .render {
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }

    .lil-gui.autoPlace{
      right:0px !important;
      top:48px !important;
      height:33vh;
    }

    #VRButton {
      margin-bottom:20vh;
    }

    @media (max-width: 450px) {
      #uri{ display:none; }
    }

    @media (max-width: 640px) {
      .lil-gui.root{
        top:auto !important;
        left:auto !important;
      }
      .js-snackbar__message{
        overflow-y:auto;
        max-height:600px;
      }
      .js-snackbar__message h1,h2,h3{
        font-size:22px;
      }
      .xrf table tr td {
    
      }
      :root{
        --xrf-font-size-1: 13px;
        --xrf-font-size-2: 17px;
        --xrf-font-size-3: 20px;
      }
    }


    /* notifications */

    .js-snackbar-container .btn,
    .js-snackbar-container input[type=submit],
    .js-snackbar-container button{
      margin-bottom:15px;
    }
    .js-snackbar-container {
        position: absolute;
        top: 10px;
        left: 0px;
        display: flex;
        align-items: center;
      width:100%;
        max-width: 100%;
        padding: 10px;
        z-index:1001;
      justify-content: center;
        overflow: hidden;
    }

    .js-snackbar-container * {
        box-sizing: border-box;
    }

    .js-snackbar__wrapper {
      --color-c: #555;
      --color-a: #FFF;
    }


    .js-snackbar__wrapper {
        overflow: hidden;
        height: auto;
        margin: 5px 0;
        transition: all ease .5s;
        border-radius: 3px;
        box-shadow: 0 0 4px 0 var(--xrf-box-shadow);
        right: 20px;
        position: fixed;
        top: 55px;
    }

    .js-snackbar {
        display: inline-flex;
        box-sizing: border-box;
        border-radius: 3px;
        color: var(--color-c);
        background-color: var(--color-a);
        vertical-align: bottom;
    }

    .js-snackbar__close,
    .js-snackbar__status,
    .js-snackbar__message {
        position: relative;
    }

    .js-snackbar__message {
      margin: 12px;
    }

    .js-snackbar__status {
        display: none;
        width: 15px;
        margin-right: 5px;
        border-radius: 3px 0 0 3px;
        background-color: transparent;
    }

     .js-snackbar__status.js-snackbar--success,
     .js-snackbar__status.js-snackbar--warning,
     .js-snackbar__status.js-snackbar--danger,
     .js-snackbar__status.js-snackbar--info {
        display: block;
    }

    .js-snackbar__status.js-snackbar--success  {
        background-color: #4caf50;
    }

    .js-snackbar__status.js-snackbar--warning  {
        background-color: #ff9800;
    }

     .js-snackbar__status.js-snackbar--danger {
        background-color: #ff6060;
    }

    .js-snackbar__status.js-snackbar--info {
        background-color: #CCC;
    }

    .js-snackbar__close {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 10px;
        user-select: none;
    }

    .js-snackbar__close:hover {
        background-color: #4443;
    }

    .a-enter-vr-button, .a-enter-ar-button{
      height:41px;
    }

    #qrcode{
      background: transparent;
      overflow: hidden;
      height: 121px;
      display: inline-block;
      position: relative;
    }

    input#share{
      font-size: var(--xrf-font-size-1);
      font-family: var(--xrf-font-monospace);
      border:2px solid #AAA;
      width:50vw;
      max-width:400px;
    }

    .footer {
      display: flex;
      flex-direction: column-reverse; /* This reverses the stacking order of the flex container */
      align-items: flex-end;
      height: 100%;
      position: fixed;
      top: 71px;
      right: 11px;
      bottom: 0;
      padding-bottom:149px;
      box-sizing:border-box;
    }
    .footer .menu{
      text-align:right;
    }

  </style>
`