<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="{{choiceValue}}">
    </light9-listbox>
  </template>

</template>

</dom-module>

const coffeeElementSetupLight9LiveControl = (function() {
    class Light9LiveControl extends Polymer.Element {
      static is: string;
      static getter_properties: {
          graph: { type: any; notify: boolean; }; device: { type: any; }; deviceAttrRow: { type: any; }; // object returned from attrRow, below
          value: { type: any; notify: boolean; }; // null, Uri, float, str
          choiceValue: { type: any; }; immediateSlider: { notify: boolean; observer: string; }; sliderWriteValue: { ...; }; pickedChoice: { ...; }; graphToControls: { ...; };
      };
      static getter_observers: {};
      enableChange: boolean;
      value: any;
      immediateSlider: any;
      deviceAttrRow: any;
      sliderWriteValue: { value: any; };
      choiceValue: any;
      graphToControls: any;
      graph: any;
      pickedChoice: any;
      static initClass() {
        this.is = 'light9-live-control';
        this.getter_properties = {
          graph: { type: Object, notify: true },
          device: { type: Object },
          deviceAttrRow: { type: Object }, // object returned from attrRow, below
          value: { type: Object, notify: true }, // null, Uri, float, str
          choiceValue: { type: Object },
        
          immediateSlider: { notify: true, observer: 'onSlider' },
          sliderWriteValue: { type: Number },
    
          pickedChoice: { observer: 'onChange' },
          graphToControls: { type: Object }
        };
        this.getter_observers = [
          'onChange(value)',
          'onGraphToControls(graphToControls)',
          'onChoice(choiceValue)'
          ];
      }
      constructor() {
        super();
        this.enableChange = false; // until 1st graph read
      }
      onSlider() { return this.value = this.immediateSlider; }
      goBlack() { return this.value = "#000000"; }
      onGraphToControls(gtc: { register: (arg0: any, arg1: any, arg2: any) => void; }) {
        gtc.register(this.device, this.deviceAttrRow.uri, this.graphValueChanged.bind(this));
        return this.enableChange = true;
      }
        device(device: any, uri: any, arg2: any) {
            throw new Error("Method not implemented.");
        }
  
      graphValueChanged(v: { value: any, }) {
        log('change: control gets', v);
        this.enableChange = false;
        if (v === null) {
          this.clear();
        } else {
          this.value = v;
        }
        if (this.deviceAttrRow.useSlider) { this.sliderWriteValue = v; }
        if (this.deviceAttrRow.useChoice) { this.choiceValue = (v === null ? v : v.value); }
        return this.enableChange = true;
      }
  
      onChoice(value: any) {
        if ((this.graphToControls == null) || !this.enableChange) { return; }
        if (value != null) {
          value = this.graph.Uri(value);
        } else {
          value = null;
        }
        return this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);
      }
      
      onChange(value: any) {
        if ((this.graphToControls == null) || !this.enableChange) { return; }
        if ((typeof value === "number") && isNaN(value)) { return; } // let onChoice do it
        //log('change: control tells graph', @deviceAttrRow.uri.value, value)
        if (value === undefined) {
          value = null;
        }
        return this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);
      }
  
      clear() {
        this.pickedChoice = null;
        this.sliderWriteValue = 0;
        if (this.deviceAttrRow.useColor) {
          return this.value = '#000000';
        } else if (this.deviceAttrRow.useChoice) {
          return this.value = (this.pickedChoice = null);
        } else {
          return this.value = (this.immediateSlider = 0);
        }
      }
    }
    
    Light9LiveControl.initClass();
    return Light9LiveControl;
  })();