<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: 335px;
       
   }
   .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;
       margin-top: 0;
       margin-bottom: 0;
   }
   .device, h2 {
       border-top-right-radius: 15px;
   }

   #mainLabel {
       font-size: 120%; 
       color: #9ab8fd;
       text-decoration: initial;
   }
   .device.selected h2 {
       outline: 3px solid #ffff0047;
   }
   .deviceAttr.selected {
       background: #cada1829;
   }
  </style>
  <div class$="device {{devClasses}}">
    <h2 style$="[[bgStyle]]" xon-click="onClick">
      <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 xon-click="onAttrClick" class$="deviceAttr {{dattr.attrClasses}}">
        <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>

const coffeeElementSetupLight9LiveDeviceControl = (function() {
    class Light9LiveDeviceControl extends Polymer.Element {
      static is: string;
      static getter_properties: {
          graph: { type: any; notify: boolean; }; uri: { type: any; notify: boolean; }; effect: { type: any; }; deviceClass: { type: any; notify: boolean; }; // the uri str
          deviceAttrs: { type: any; notify: boolean; }; graphToControls: { ...; }; bgStyle: { ...; }; devClasses: { ...; }; // the css kind
      };
      static getter_observers: {};
      selectedAttrs: any;
      graph: any;
      uri: any;
      devClasses: string;
      deviceClass: any;
      deviceAttrs: {};
      shadowRoot: any;
      static initClass() {
        this.is = "light9-live-device-control";
        this.getter_properties = {
          graph: { type: Object, notify: true },
          uri: { type: String, notify: true },
          effect: { type: String },
          deviceClass: { type: String, notify: true }, // the uri str
          deviceAttrs: { type: Array, notify: true },
          graphToControls: { type: Object },
          bgStyle: { type: String, computed: '_bgStyle(deviceClass)' },
          devClasses: { type: String, value: '' } // the css kind
        };
        this.getter_observers = [
          'onGraph(graph)'
          ];
      }
      constructor() {
        super();
        this.selectedAttrs = new Set(); // uri strings
      }
      _bgStyle(deviceClass: { value: any, length: number, charCodeAt: (arg0: number) => number, }) {
        let hash = 0;
        deviceClass = deviceClass.value;
        for (let start = deviceClass.length-10, i = start, end = deviceClass.length, asc = start <= end; asc ? i < end : i > end; asc ? i++ : i--) {
          hash += deviceClass.charCodeAt(i);
        }
        const hue = (hash * 8) % 360;
        const accent = `hsl(${hue}, 49%, 22%)`;
        return `background: linear-gradient(to right, rgba(31,31,31,0) 50%, ${accent} 100%);`;
      }
      
      onGraph() {
        return this.graph.runHandler(this.update.bind(this), `${this.uri.value} update`);
      }
  
      setDeviceSelected(isSel: any) {
        return this.devClasses = isSel ? 'selected' : '';
      }
  
      setAttrSelected(devAttr: { value: any, }, isSel: any) {
        if (isSel) {
          this.selectedAttrs.add(devAttr.value);
        } else {
          this.selectedAttrs.delete(devAttr.value);
        }
        return this.update();
      }
      
      update(patch: null) {
        const U = (x: string) => this.graph.Uri(x);
        if ((patch != null) && !SyncedGraph.patchContainsPreds(
          patch, [U('rdf:type'), U(':deviceAttr'), U(':dataType'), U(':choice')])) { return; }
        this.deviceClass = this.graph.uriValue(this.uri, U('rdf:type'));
        this.deviceAttrs = [];
        return Array.from(_.unique(this.graph.sortedUris(this.graph.objects(this.deviceClass, U(':deviceAttr'))))).map((da: any) =>
          this.push('deviceAttrs', this.attrRow(da)));
      }
        push(arg0: string, arg1: { uri: { value: any, }, dataType: any, showColorPicker: any, attrClasses: string, }) {
            throw new Error("Method not implemented.");
        }
  
      attrRow(devAttr: { value: any, }) {
        let x: { value: any; };
        const U = (x: string) => this.graph.Uri(x);
        const dataType = this.graph.uriValue(devAttr, U(':dataType'));
        const daRow = {
          uri: devAttr,
          dataType,
          showColorPicker: dataType.equals(U(':color')),
          attrClasses: this.selectedAttrs.has(devAttr.value) ? 'selected' : ''
          };
        if (dataType.equals(U(':color'))) {
          daRow.useColor = true;
        } else if (dataType.equals(U(':choice'))) {
          daRow.useChoice = true;
          const choiceUris = this.graph.sortedUris(this.graph.objects(devAttr, U(':choice')));
          daRow.choices = ((() => {
            const result = [];
            for (x of Array.from(choiceUris)) {             result.push({uri: x.value, label: this.graph.labelOrTail(x)});
            }
            return result;
          })());
          daRow.choiceSize = Math.min(choiceUris.length + 1, 10);
        } else {
          daRow.useSlider = true;
          daRow.max = 1;
          if (dataType.equals(U(':angle'))) {
            // varies
            daRow.max = 1;
          }
        }
        return daRow;
      }
        
      clear() {
        return Array.from(this.shadowRoot.querySelectorAll("light9-live-control")).map((lc: { clear: () => any; }) =>
          lc.clear());
      }
  
      onClick(ev: any) {
        return log('click', this.uri);
      }
        // select, etc
  
      onAttrClick(ev: { model: { dattr: { uri: any, }, }, }) {
        return log('attr click', this.uri, ev.model.dattr.uri);
      }
    }
        // select
    
    Light9LiveDeviceControl.initClass();
    return Light9LiveDeviceControl;
  })();