<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="/rdf/rdf-uri.html">

<dom-module id="output-sender">
  <template>
    <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: {
       output: { type: String, value: "output" }, // url to PUT outputs
       streamedGraph: { notify: true, observer: 'onGraphChange' },
       subj: { notify: true },
       pred: { notify: true },
       value: { notify: true, observer: 'browserChangedValue' }
     },
     ready: function() {
       this.waitOnChangeMs = 100;
       this.smallestRequestPeriodMs = 100;
       this.synced = false;
       
       this.newRequestNeedsSending = false;
       this.lastSendMs = 0;
       this.$.output.addEventListener('response', this.onResponse.bind(this));

     },
     onGraphChange: function(streamedGraph) {
       if (!streamedGraph.graph) {
         return;
       }
       var env = streamedGraph.graph.store.rdf;
       streamedGraph.graph.quadStore.quads({
         subject: env.createNamedNode(this.subj),
         predicate: env.createNamedNode(this.pred)
       }, function(quad) {
         this.serverChangedValue(quad.object.valueOf());
       }.bind(this));
     },
     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();
     },
     browserChangedValue: 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);
     },
     serverChangedValue: function(v) {
       this.value = v;
       this.synced = true;
     }
   });
  </script>
</dom-module>

<dom-module id="output-rgb">
  <template>
    <div style="display: flex">
      <div>
        <output-sender streamed-graph="{{streamedGraph}}" 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 streamed-graph="{{streamedGraph}}" output="{{output}}" 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: {
       output: { notify: true },
       streamedGraph: { notify: true }, 
       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 streamed-graph="{{streamedGraph}}" 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 streamed-graph="{{streamedGraph}}" 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 },
       streamedGraph: { type: Object, notify: true, observer: 'onGraph' },
     },
     ready: function () {
       this.elem = document.createElement(this.desc.element);
       this.appendChild(this.elem);
       for (var k of Object.keys(this.desc)) {
         this.elem.setAttribute(k, this.desc[k]);
       }
       this.elem.streamedGraph = this.streamedGraph;
     },
     onGraph: function(g) {
       if (this.elem) {
         this.elem.streamedGraph = g;
       }
     }
   });
  </script>
</dom-module>