import {parseJSON} from './resources/jsonparser';
import {schema, fieldsToShow} from './schemas/index';
import YAML from 'yamljs';
import $ from 'jquery';

export class App {
  constructor() {
    // Allow access from browser console
    window.$oai = this;

    this.forms = parseJSON('swagger', schema);
    if (window.localStorage.cachedForm) {
      this.forms.setValue(JSON.parse(window.localStorage.cachedForm));
    }

    this.activeForm = this.forms.getChild('header');
    this.activeForm.show = true;

    window.onhashchange = () => {
      const formID = window.location.hash.substr(2) || 'header';
      if (this.forms.hasChild(formID)) {
        this.activeForm.show = false;
        this.activeForm = this.forms.getChild(formID);
        this.activeForm.show = true;
        $('.nav > .nav-link.open').removeClass('open');
        $(`#nav-${formID}`).addClass('open');
      }
    };
  }

  attached() {
    window.onhashchange();
  }

  download(type) {
    let data;
    if (type === 'json') {
      data = this.json;
    } else if (type === 'yaml') {
      data = this.yaml;
    } else {
      return;
    }

    // Add an anchor element that has the data as the href attribute, then click
    // the element to download the data.
    const blob = new Blob([data], {type: 'text/json'});
    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveBlob(blob, `swagger.${type}`);
    } else {
      const downloadLink = document.createElement('a');
      downloadLink.href = window.URL.createObjectURL(blob);
      downloadLink.download = `swagger.${type}`;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
  }

  get yaml() {
    return YAML.stringify(this.forms.getValue(), 10, 2);
  }

  get json() {
    const data = JSON.stringify(this.forms.getValue(), '', '  ');
    return data;
  }

  get currentFormJSON() {
    const rawData = this.forms.getValue();
    // This is a temporary-ish solution for saving the form data automatically.
    // Basically this saves the form every time the preview updates.
    window.localStorage.cachedForm = JSON.stringify(rawData);
    if (fieldsToShow.hasOwnProperty(this.activeForm.id)) {
      let output = '';
      for (const field of fieldsToShow[this.activeForm.id]) {
        output += `"${field}": ${JSON.stringify(rawData[field], '', '  ')}\n`;
      }
      return output;
    }
    const data = JSON.stringify(this.activeForm.getValue(), '', '  ');
    return `"${this.activeForm.id}": ${data}`;
  }
}

@@ -892,16 +892,79 @@
 %7D%0A    %7D;
+%0A%0A    this.forms.addChangeListener(() =%3E this.saveFormLocal());
 %0A  %7D%0A%0A  
@@ -1964,285 +1964,132 @@
 %0A%0A  
-get currentFormJSON() %7B%0A    const rawData = this.forms.getValue();%0A    // This is a temporary-ish solution for saving the form data automatically.%0A    // Basically this saves the form every time the preview updates.%0A    window.localStorage.cachedForm = JSON.stringify(rawData);
+saveFormLocal() %7B%0A    window.localStorage.cachedForm = JSON.stringify(this.forms.getValue());%0A  %7D%0A%0A  get currentFormJSON() %7B
 %0A   
@@ -2140,24 +2140,69 @@
 Form.id)) %7B%0A
+      const rawData = this.forms.getValue();%0A
       let ou

Use change listeners for saving the form