<!DOCTYPE html>
<html>

  <head>
    <meta charset='UTF-8'>
    <title>JSON Editor Widget</title>
    <meta name="robots" content="noindex">
    <link rel='stylesheet' href='./style.css?nocache'>
    <!--<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>-->
    <style type="text/css">
      /* initial css from parent app - setup to prevents FOUC while loading */
      .results-view { width: 720px; border: 1px solid #333; margin: 0 auto; }
    </style>
  </head>

  <body onload="init()">
    <div class="container">
      <div class="well well-sm text-center">
        <h2>
          JSON Editor Widget
          <div class="small">Pure JavaScript - Framework Agnostic</div>
        </h2>
        <div class="btn-group">
          <button id='start' onclick="init()" class="btn btn-success">Init</button>
          <button id='destroy' onclick="jsonReactor.destroy()" class="btn btn-danger">Destroy</button>
        </div>
      </div>

      <div class="well well-sm text-center">
        <div class="json-data-view">
          <textarea class='json-string' rows='6'></textarea>
        </div>
      </div>

      <div class="text-center">
        <div id="app">
        </div>
      </div>
    </div>
    <script src='../dist/json-reactor.js?cache=not-now'></script>
    <script>
      var jsonReactor;
const treeRoot = document.querySelector('#tree-root');
const config = [
  {key: 'title', type: 'string', title: 'Site Title', subtitle: 'Title:* '},//, value: 'json-reactor'},
  {key: 'description', type: 'string', title: 'Description', subtitle: 'Desc.: '},//, value: 'Best Config & JSON Editor In ReactJS'},
  {key: 'awesomeness', title: 'How Awesome is rson-reactor?', type: 'string',
    enum: ['Totes', 'Way Totes', 'Totes AF', 'I don\'t like nice things'],
  },
  {key: 'options', type: 'object', title: 'Profile Options',
    subtitle: 'Account settings',
    expanded: true,
    children: [
      {key: 'favouritePet', type: 'string', title: 'Favourite Cat/Dog Name', subtitle: 'Name:', required: true, min: 2},
      {key: 'iCanHaz', type: 'boolean', title: 'i can haz?'},
      {key: 'paymentInfo', type: 'object', title: 'Payment Info',
        expanded: true,
        children: [
          {key: 'provider', title: 'provider', type: 'string',
            enum: ['stripe', 'paypal', 'authorize.net', 'IOU'],
          },
          {key: 'enabled',  title: 'enabled',  type: 'boolean', default: true}
        ]
      }
    ]
  }
];
      function init() {
        const jsonText = document.querySelector('textarea.json-string')
        let jsonInput;
        try {
          jsonInput = jsonText && jsonText.value && jsonText.value.length > 5 ? JSON.parse(jsonText.value) : config;
          //let schema = JsonReactor.Schema(jsonInput);
          //jsonReactor  = JsonReactor.create(document.querySelector('.results-view'), schema)
          // ^^ convert to schema ^^
        } catch (e) {
          if (e instanceof SyntaxError) {
            console.warn('JSON Parsing Error', e);
            alert('Check yo JSON, man!\n\n' + JSON.stringify(e.stack, null, 1));
          } else {
            console.error('Unexpected FAIL Making The JSON', e);
          }
        }

        jsonText.value = JSON.stringify(jsonInput, null, 2)
        window.treeRootRef = JsonReactor.loadTreeApp({data: config, draggable: false});
        // window.treeRootRef = JsonReactor.mountTree(treeRoot, config);
      }
      setTimeout(init, 250)
    </script>
  </body>

</html>