// this demonstrates the remotestorage aframe component 

// reactive component for displaying the menu 
remoteStorageComponent = (el) => new Proxy({

  html: (data) => (`
    <style type="text/css">
      body #files .rs-button-big{
        background: #FFF;
        box-shadow: none;
        border: 1px solid #CCC;
        padding: 10px 0px 49px 10px;
      }
      #files .rs-button{
        background:#CCC;
      }
    </style> 

    <div id="remoteFilesTab">
      <div id="rswidget"></div>
      <br>
      <div id="buttons" style="display:none">
        <button id="remoteOpen"  ><i class="gg-software-upload"></i> open experience</button>
        <br>
        <button id="remoteSave"><i class="gg-software-download"></i> save private experience</button>
        <br>
        <button id="remoteSave"><i class="gg-globe-alt"></i> save public experience</button>
      </div>
    </div>
  `),

  connected: false,

  init(opts){
    // create HTML element
    $files.tabs = $files.tabs.concat({id:"remoteFiles", name: "online"})
    el.innerHTML = this.html(this)
    el.className = "tab"
    document.querySelector("#files .tab-frame").appendChild(el);

    // setup input listeners
    (['click']).map( (e) => el.addEventListener(e, (ev) => typeof this[e] == 'function' && this[e](ev.target.id,ev) ) )

    // signal ready 
    setTimeout( () => {
      document.dispatchEvent( new CustomEvent("remotestorage:ready", {detail: {$files:this,xrf}}) )
    },100)

    this.loadScript( () => this.initRemoteStorage() )

    return this
  },

  loadScript(cb){
    let el = document.createElement("script")
    el.setAttribute("defer","")
    el.src = "https://unpkg.com/remotestoragejs@2.0.0-beta.7/release/remotestorage.js"
    document.head.appendChild(el)

    el = document.createElement("script")
    el.src = "https://unpkg.com/remotestorage-widget@1.6.0/build/widget.js"
    el.addEventListener('load', () => setTimeout(cb,2000) )
    document.head.appendChild(el)
  },

  initRemoteStorage(){
    let apis = {
      dropbox: "4jc8nx1lbarp472"
    }
    const modules = []
    if( typeof WebXRF != undefined ){
      modules.push(WebXRF) // defined in remotestorage-module-webXRF.js
    }
    window.remoteStorage = new RemoteStorage({logging: true, modules })
    if( Object.keys(apis).length ) remoteStorage.setApiKeys(apis)

    remoteStorage.on('connected',       (e) => { this.connected = true })
    //remoteStorage.on('network-offline', (e) => this.el.sceneEl.emit('remoteStorage.network-offline',e) )
    //remoteStorage.on('network-online',  (e) => this.el.sceneEl.emit('remoteStorage.network-online',e) )    
    //remoteStorage.on('error',           (e) => this.el.sceneEl.emit('remoteStorage.error',e) )    
    remoteStorage.on('ready',           (e) => { }  )

    remoteStorage.access.claim( `webxr`, 'rw');    // our data dir
    remoteStorage.caching.enable( `/webxr/` ) // local-first, remotestorage-second
    remoteStorage.caching.enable( `/public/webxr/` ) // local-first, remotestorage-second

    // create widget
    let opts = {}
    opts.modalBackdrop = false
    opts.leaveOpen     = true
    widget = new window.Widget(window.remoteStorage, opts)
    widget.attach( "rswidget" );

  },

  click(id,e){
    //switch(id){
    //  case "more": return this.toggle(); break;
    //}
  }
},
{

  get(me,k,v){ return me[k] },

  set(me,k,v){ 
    me[k] = v    
    switch( k ){
        case 'connected': el.querySelector("#buttons").style.display = v ? 'block' : 'none'; break;
    }
  },

})

// reactify component!
document.addEventListener('$files:ready', (e) => {
  window.$remotestorage = remoteStorageComponent( document.createElement('div') ).init(e.detail)
})