<div id="app"></div>
<div id="textInput"></div>
<div id="textInput2"></div>
<div id="p"></div>
<a href="https://reefjs.com/getting-started/">Link to reefjs</a>

<!-- Use the latest major version -->
<script src="../../node_modules/reefjs/dist/reef.min.js"></script>
<script>
  // Setup the component
  var app = new Reef('#app', {
    data: {
      time: new Date().toLocaleTimeString()
    },
    template: function (props) {
      return `<strong>The time is:</strong> <span>${props.time}</span>`;
    }
  });

  // Render the component
  app.render();

  // Update the clock once a second
  window.setInterval(function () {
    app.data.time = new Date().toLocaleTimeString();
  }, 1000);

  var textInput = new Reef('#textInput', {
    data: {
      value: ""
    },
    template: function (props) {
      return `<input type="text" value="${props.value}" /><p>${props.value}</p>`;
    }
  });

  textInput.render();

  document.querySelector('input').addEventListener('input', function () {
    textInput.data.value = event.target.value;
  })

  var store = new Reef.Store({
    data: {
      otherValue: 'A',
    }
  });

  var textInput2 = new Reef('#textInput2', {
    store: store,
    template: function () {
      return `<input id="input2" type="text" value="${store.data.otherValue}" />`;
    }
  });

  var paragraph = new Reef('#p', {
    store: store,
    template: function () {
      return `<p>${store.data.otherValue}</p>`;
    }
  });

  textInput2.render();
  paragraph.render();
  document.querySelector('#input2').addEventListener('input', function () {
    console.log(event.target.value);
    store.data.otherValue = event.target.value;
  })


</script>