browserFileStorage.init('Demo App').then((status) => {
    window.app = App(browserFileStorage);
    app.main();
});

function view () { return `
<div style="text-align:center">
  <h1>Browser File Storage Demo</h1>
  <p style="margin-bottom: 30px;"><a href="https://github.com/JayPuff/browser-file-storage">BrowserFileStorage</a></p>
</div>

<div style="display:flex; justify-content:space-between">
    <div>
        <div style="margin-right:30px">
            <div style="width:400px;">
                <textarea id="ed" rows="10" cols="50"></textarea>
                <div>
                    <button id="clear" onclick="app.clear()">Clear</button>
                    <button id="save" onclick="app.save()">Save</button>
                    <button id="loadimg" onclick="app.load()">Load</button>
                </div>
                <div>
                    <button onclick="app.loadImgTag()">loag img tag
                </div>
            </div>
        </div>
        <div>
          <h2>Loaded Content</h2>
        </div>
        <div id="target">
        </div>
    </div>
    <div style="text-align:left; width:100%; margin-left: 20px;">
       <div id="log" style="margin-bottom: 20px;"></div>
       <button onclick="app.clearLog()">clear log</button>
    </div>
</div>
`
                 }

const content = "<h1>Header</h1>"

function App (fs) {

  let FS = fs;
  let elt;
  let logContent = ""
  let log;

  let img = "<img src='https://static.raymondcamden.com/images/banners/storage.jpg'>"

  function logMe(msg) {
    logContent += `${msg}<br />`
    log.innerHTML = logContent
  }

  async function save() {
    console.log(elt.value)
    var savedFile = await FS.save('msg.html', elt.value)  
    logMe('Saved file successfully!', savedFile);
  }

  async function load () {
    var loadedFile = await  FS.load("msg.html");
    var stringFile = await  loadedFile.toString();
    logMe("Loaded successfull")
    elt.value = stringFile;
    target.innerHTML = elt.value
  }

  function clear () {
    elt.value = ""
    logMe("Clear content")
    target.innerHTML = elt.value
  }

  function clearLog () {
    log.innerHTML = ""
    logContent = ""
  }

  function loadImgTag () {
    elt.value = img
    save()
    clear()
    load()
  }   

  function main () {
    document.body.innerHTML =  view();
    elt = document.getElementById("ed")
    log = document.getElementById("log")
    logMe("Indexed initialized")
  }

  return {
    main : main,
    save: save,
    load: load,
    clear: clear,
    loadImgTag : loadImgTag,
    clearLog : clearLog
  }
}