<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="/lib/polymer/1.0.9/color-picker-element/dist/color-picker.html">
<link rel="import" href="/room/ari/static/rdf-uri.html">

<dom-module id="output-sender">
  <template>
    <iron-ajax id="graphGet" url="../graph" method="GET" headers='{"Accept": "application/ld+json"}'></iron-ajax>
    <iron-ajax id="output" url="../output" method="PUT"></iron-ajax>
    Set <a href$="{{subj}}">{{compactUri(subj)}}</a>'s
    <span>{{compactUri(pred)}}</span> to
  </template>
  <script>
   Polymer({
     is: 'output-sender',
     behaviors: [BigastUri],
     properties: {
       subj: { notify: true },
       pred: { notify: true },
       value: { notify: true, observer: 'valueChanged' }
     },
     ready: function() {
       this.waitOnChangeMs = 100;
       this.smallestRequestPeriodMs = 200;
       this.synced = false;
       
       this.newRequestNeedsSending = false;
       this.lastSendMs = 0;
       this.$.output.addEventListener('response', this.onResponse.bind(this));

       this.loadInitialValue();
     },
     loadInitialValue: function() {
       this.$.graphGet.addEventListener('response', function(ev) {
         ev.target.removeEventListener(ev.type, arguments.callee);

         ev.detail.response.forEach(function(row) {
           var subj = row['@id'];
           if (subj == this.subj) {
             Object.keys(row).forEach(function(pred) {
               if (pred == this.pred) {
                 row[pred].forEach(function(obj) {
                   this.value = obj['@value'];
                   this.synced = true;
                 }.bind(this));
               }
             }.bind(this));
           }
         }.bind(this));

       }.bind(this));
       this.$.graphGet.generateRequest();
     },
     onResponse: function() {
       if (!this.newRequestNeedsSending) {
         return;
       }
       if (this.$.output.activeRequests.length > 0) {
         return; // 'response' event will call us back
       }

       var now = Date.now(), dt = now - this.lastSendMs;
       if (dt < this.smallestRequestPeriodMs) {
         setTimeout(this.onResponse.bind(this),
                    this.smallestRequestPeriodMs - dt);
         return;
       }
       this.newRequestNeedsSending = false;
       this.lastSendMs = now;
       this.$.output.generateRequest();
     },
     valueChanged: function () {
       if (!this.subj || !this.pred) {
         return;
       }
       //this.$.output.headers = {'content-type': ...}
       this.$.output.params = {s: this.subj, p: this.pred};
       this.$.output.body = this.value;
       this.newRequestNeedsSending = true;
       setTimeout(this.onResponse.bind(this), this.waitOnChangeMs);
     }
   });
  </script>
</dom-module>

<dom-module id="output-rgb">
  <template>
    <div style="display: flex">
      <div>
        <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
        <div>color pick <span>{{value}}</span>
        <button on-click="black">Black</button>
        <button on-click="white">White</button>
        </div>
      </div>
      <div>
        <color-picker id="pick" width="200" height="100" color="{{value}}"></color-picker>
      </div>
    </div>
  </template>
  <script>
   Polymer({
     is: 'output-rgb',
     properties: {
       value: { notify: true },
     },
     ready: function () {
       this.$.pick.addEventListener('colorselected', function (ev) {
         this.value = ev.detail.hex;
       }.bind(this));
     },
     black: function() {this.value = "#000000";},
     white: function() {this.value = "#ffffff";}
   });
  </script>
</dom-module>

<dom-module id="output-slider">
  <template>
    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value::input}}"> <span>{{value}}</span>
  </template>
  <script>
    Polymer({
      is: 'output-slider',
      properties: {
        max: { notify: true },
        min: { notify: true },
        step: { notify: true }
      },
    });
  </script>
</dom-module>

<!--
    TODO(polyup): Inheriting from other custom elements is not yet supported.
    See: https://www.polymer-project.org/1.0/docs/migration.html#inheritance
 -->
<dom-module id="output-fixed-text">
  <template>
    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
    <textarea rows="{{rows}}" cols="{{cols}}" value="{{value::input}}"></textarea>
  </template>
  <script>
    Polymer({
      is: 'output-fixed-text',
      properties: {
        cols: { notify: true },
        rows: { notify: true }
      },
    });
  </script>
</dom-module>

<dom-module id="output-switch">
  <template>
    <output-sender subj="{{subj}}" pred="{{pred}}" value="{{value}}"></output-sender>
    <input type="checkbox" checked="{{check::change}}"> <span>{{value}}</span>
  </template>
  <script>
   Polymer({
     is: 'output-switch',
     properties: {
       check: {
         type: Boolean,
         value: false,
         observer: 'checkChanged'
       },
       value: { notify: true }
     },
     checkChanged: function () {
       this.value = this.check ? 'high' : 'low';
     },
   });
  </script>
</dom-module>

<dom-module id="output-widget-any">
  <template></template>
  <script>
   Polymer({
     is: 'output-widget-any',
     properties: {
       desc: { type: Object, notify: true }
     },
     ready: function () {
       var elem = document.createElement(this.desc.element);
       this.appendChild(elem);
       for (var k of Object.keys(this.desc)) {
         elem.setAttribute(k, this.desc[k]);
       }
     }
   });
  </script>
</dom-module>