<link rel="import" href="/lib/polymer/polymer.html">

<link rel="import" href="/lib/paper-slider/paper-slider.html">
<link rel="import" href="/lib/paper-listbox/paper-listbox.html">
<link rel="import" href="/lib/paper-item/paper-item.html">
<link rel="import" href="/lib/iron-ajax/iron-ajax.html">

<link rel="import" href="../rdfdb-synced-graph.html">
<link rel="import" href="../resource-display.html">
<link rel="import" href="../light9-color-picker.html">
<link rel="import" href="../edit-choice.html">

<dom-module id="light9-listbox">
  <template>
    <style>
     paper-listbox {
         --paper-listbox-background-color: none;
         --paper-listbox-color: white;
         --paper-listbox: {
             /* measure biggest item? use flex for columns? */
             column-width: 9em;
         }
     }
     paper-item {
         --paper-item-min-height: 0;
         --paper-item: {
             display: block;
             border: 1px outset #0f440f;
             margin: 0 1px 5px 0;
             background: #0b1d0b;
         }
     }
    </style>
    <paper-listbox id="list"
                   selected="{{value}}"
                   attr-for-selected="uri"
                   on-focus-changed="selectOnFocus"
    >
      <paper-item on-focus="selectOnFocus">None</paper-item>
      <template is="dom-repeat" items="{{choices}}">
        <paper-item on-focus="selectOnFocus" uri="{{item.uri}}">{{item.label}}</paper-item>
      </template>
    </paper-listbox>

  </template>
  <script>
   HTMLImports.whenReady(function () {
     Polymer({
       is: "light9-listbox",
       properties: {
         choices: { type: Array },
         value: { type: String, notify: true },
       },
       observers: ['onValue(value)'],
       selectOnFocus: function(ev) {
         if (ev.target.uri === undefined) {
           // *don't* clear for this, or we can't cycle through all choices (including none) with up/down keys
           //this.clear();
           //return;
         }
         this.value = ev.target.uri;
         
       },
       onValue: function(value) {
         if (value === null) {
           this.clear();
         }
       },
       clear: function() {
         this.async(function() {
           this.querySelectorAll('paper-item').forEach(
             function(item) { item.blur(); });
           this.value = undefined;
         }.bind(this));

       },
       
     });
   });
  </script>
</dom-module>

<dom-module id="light9-live-control">
  <template>
    <style>
     #colorControls {
         display: flex;
         align-items: center;
     }
     #colorControls > * {
         margin: 0 3px;
     }
     #colorControls paper-slider {

     }
     paper-slider { width: 100%; height: 25px; }
    </style>

    <style is="custom-style">
     paper-slider {
         --paper-slider-knob-color: var(--paper-red-500);
         --paper-slider-active-color: var(--paper-red-500);

         --paper-slider-font-color: white;
         --paper-slider-input: {
             width: 75px;

             background: black;
             display: inline-block;
         }
     }
     
    </style>

    <template is="dom-if" if="{{deviceAttrRow.useSlider}}">
      <paper-slider min="0"
                    max="{{deviceAttrRow.max}}"
                    step=".001"
                    editable
                    content-type="application/json"
                    value="{{sliderWriteValue}}"
                    immediate-value="{{immediateSlider}}"></paper-slider>
    </template>
    <template is="dom-if" if="{{deviceAttrRow.useColor}}">
      <div id="colorControls">
        <button on-click="goBlack">0.0</button>
        <light9-color-picker color="{{value}}"></light9-color-picker>
        
      </div>
    </template>
    <template is="dom-if" if="{{deviceAttrRow.useChoice}}">
      <light9-listbox choices="{{deviceAttrRow.choices}}" value="{{value}}">
      </light9-listbox>
    </template>

  </template>
  
</dom-module>

<dom-module id="light9-live-device-control">
  <template>
    <style>
     :host {
         display: inline-block;
     }
     .device {
         border: 2px solid #151e2d;
         margin: 4px;
         padding: 1px;
         background: #171717;  /* deviceClass gradient added later */
         break-inside: avoid-column;
         width: 445px;
         
     }
     .deviceAttr {
         border-top: 1px solid #272727;
         padding-bottom: 2px;
         display: flex;
     }
     .deviceAttr > span {

     }
     .deviceAttr > light9-live-control {
         flex-grow: 1;
     }
     h2 {
         font-size: 110%;
         padding: 4px;
     }
     .device, h2 {
         border-top-right-radius: 15px;
     }

     #mainLabel {
         font-size: 120%; 
         color: #9ab8fd;
         text-decoration: initial;
     }
    </style>
    <div class="device">
      <h2 style$="[[bgStyle]]">
        <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
        a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
      </h2>
      <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
        <div class="deviceAttr">
          <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
          <light9-live-control
            graph="{{graph}}"
            device="{{uri}}"
            device-attr-row="{{dattr}}"
            effect="{{effect}}"
            graph-to-controls="{{graphToControls}}"
          ></light9-live-control>
        </div>
      </template>
    </div>
  </template>
</dom-module>

<dom-module id="light9-live-controls">
  <template>
    <style>
     :host {
         display: flex;
         flex-direction: column;
     }
     #preview {
         width: 100%;
     }
     #deviceControls {
         flex-grow: 1;
         position: relative;
         width: 100%;
         overflow-y: auto;
     }
     
     light9-live-device-control > div {
         break-inside: avoid-column;
     }
     light9-live-device-control {

     }
    </style>
    <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

    <h1>device control
      <button on-click="clearAll">clear all</button></h1>

    <div id="save">
      <div>
        effect name: <input type="input" value="{{newEffectName::change}}">
        <button on-click="saveNewEffect">save new effect</button>
        <edit-choice graph="{{graph}}" uri="{{effect}}"></edit-choice>
      </div>
      <textarea id="preview" value="{{effectPreview}}"></textarea>
    </div>

    <div id="deviceControls">
      <template is="dom-repeat" items="{{devices}}" as="device">
        <light9-live-device-control
          graph="{{graph}}"
          uri="{{device.uri}}"
          effect="{{effect}}"
          graph-to-controls="{{graphToControls}}"
        ></light9-live-device-control>
      </template>
    </div>

    
  </template>
</dom-module>


<script src="/node_modules/d3/dist/d3.min.js"></script>
<script src="/node_modules/n3/n3-browser.js"></script>
<script src="/lib/async/dist/async.js"></script>
<script src="/lib/underscore/underscore-min.js"></script>
<script src="../coffee_element.js"></script>
<!-- see live.coffee
     <script src="/lib/jquery/dist/jquery.js"></script>
     <script src="/lib/isotope/dist/isotope.pkgd.min.js"></script>
     <script src="/lib/isotope-fit-columns/fit-columns.js"></script>
     <script src="/lib/jquery.columnizer/src/jquery.columnizer.js"></script>
   -->

<script src="live.js"></script>