<link rel="import" href="/lib/polymer/1.0.9/iron-ajax/iron-ajax.html">
<link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
<link rel="import" href="/rdf/rdf-oneshot.html">
<link rel="import" href="/rdf/rdf-uri.html">
<link rel="import" href="/rdf/streamed-graph.html">

<dom-module id="rfid-console">
  <style>
   button {
       min-width: 60px;
       min-height: 40px;
   }
   table {
       border-collapse: collapse;
   }
   
   td, th {
       border: 1px solid gray;
   }
  </style>
  <template>
    
    <iron-ajax id="rewrite" url="rewrite" method="POST"></iron-ajax>
    
    Current RFID reads: 
    <table>
      <tr><th>Card UID</th><th>Card text</th><th></th></tr>
      <template is="dom-repeat" items="{{currentReads}}">
        <tr>
          <td>{{item.uidDisplay}}</td>
          <td>{{item.text}}</td>
          <td>
            <div id="form">
              <button on-click="rewrite">Rewrite</button>
            </div>
          </td>
        </tr>
      </template>
    </table>

    <div>
      <streamed-graph url="graph/events" graph="{{graph}}"></streamed-graph>
      <!-- also get a graph of users so we can look up cards -->
    </div>
  </template>
  <script>
   Polymer({
     is: 'rfid-console',
     properties: {
       graph: { type: Object, notify: true, observer: "_onGraph" },
       currentReads: { type: Array, value: [] },
     },
     behaviors: [BigastUri],
     _onGraph: function(graph) {
       if (!graph.graph) return;
       const env = graph.graph.store.rdf;

       this.splice('currentReads', 0, this.currentReads.length);
       graph.graph.quadStore.quads(
         {subject: env.createNamedNode('room:frontDoorWindowRfid'),
          predicate: env.createNamedNode('room:reading'),
         },
         (q) => {
           graph.graph.quadStore.quads(
             {subject: q.object,
              predicate: env.createNamedNode('room:cardText'),
             },
             (q2) => {
               this.push(
                 'currentReads', {
                   'cardUid': q.object,
                   'uidDisplay': q.object.toString().replace(/.*\//, ""),
                   'text': q2.object.toString()
                 });
             });
         });
     },
     rewrite: function(ev) {
       const cardUid = ev.model.item.cardUid;

       // ask for user first

       this.$.rewrite.contentType = "application/json";
       this.$.rewrite.body = {'cardUid': cardUid.toString(),
                              'user': "some foaf"};
       this.$.rewrite.generateRequest();
     }
   });
  </script>
</dom-module>