import {JSONEditor} from '@json-editor/json-editor'

import 'spectre.css/dist/spectre.min.css'
import 'spectre.css/dist/spectre-exp.min.css'
import 'spectre.css/dist/spectre-icons.min.css'

(function() {
  var editor = new JSONEditor(document.getElementById('editor_holder'),{
    theme: 'spectre',
    iconlib: 'spectre',
    ajax: true,

    // The schema for the editor
    schema: {
      $ref: "api/schema",
      // format: "grid"
    },
  });

  // Hook up the submit button to log to the console
  document.getElementById('submit').addEventListener('click',async function() {
    const res = await fetch('api/apply', {
      method: 'POST',
      body: JSON.stringify(editor.getValue()),
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).catch(err=>{console.log(err);return;});
    if (!res.ok) {
      console.log(res)
      const errMsg = await res.text()
      alert(errMsg)
      return
    }
    parent.KSubmit();
  });
  
  // Hook up the load from server button
  async function load() {
    const res = await fetch('api/load').catch(err=>{console.log(err);return;});
    if (!res.ok) {
      console.log(res);
      const errMsg = await res.text();
      alert(errMsg);
      return
    }
    const body = await res.json();
    editor.setValue(body);
  }
  document.getElementById('load').addEventListener('click', load);
  load();
  
  // Hook up the validation indicator to update its 
  // status whenever the editor changes
  editor.on('change',function() {
    // Get an array of errors from the validator
    var errors = editor.validate();
    
    var indicator = document.getElementById('valid_indicator');
    
    // Not valid
    if(errors.length) {
      indicator.className = 'label alert';
      indicator.textContent = 'not valid';
    }
    // Valid
    else {
      indicator.className = 'label success';
      indicator.textContent = 'valid';
    }
  });

  document.getElementById('download').addEventListener('click',async function() {
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(editor.getValue(),null,2));
    var dlAnchorElem = document.getElementById('downloadAnchorElem');
    dlAnchorElem.setAttribute('href',     dataStr     );
    dlAnchorElem.setAttribute('download', AppName+'.json');
    dlAnchorElem.click();
  });

  document.getElementById('upload').addEventListener('change',function(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var jsonObj = JSON.parse(event.target.result);
      editor.setValue(jsonObj);
    };
    reader.readAsText(e.target.files[0]);
  });
})();