<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="lamps-view">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
      paper-checkbox {
        --primary-color: #ff5722;
      }
    </style>

    <div class="card">
      <div class="circle">4</div>
      <h1>Lamp/LED Definition</h1>
      <p>Edit the LED/lamp definitions here, define the order of the LEDs in the chain and give each node a unique name:</p>
      <p>
        <iron-input bind-value="{{editing}}">
          <paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
        </iron-input><br />
        <!--Number of Lamps: <input type="number" min="1" max="120" value="{{numberleds::input}}"></input>-->
        <iron-input> 
          <paper-input always-float-label label="Number of Lamps" type="number" auto-validate="true" value="{{numberleds::input}}" min="1" max="120" error-message="The value must be in the range of 1 to 120" readonly$="[[!editing]]"></paper-input>
          <paper-button raised on-click="resizeLampList">Resize List of Lamp Names</paper-button>
        </iron-input><br />
        <br />
        <vaadin-grid aria-label="Color Definitions" items="[[lampmapping]]">
          <vaadin-grid-column width="50px" flex-grow="0">
            <template class="header">#</template>
            <template>
              [[index]]
            </template>
          </vaadin-grid-column>

          <vaadin-grid-column>
            <template class="header">Lamp Name</template>
            <template>
              <!--<input  type="text" maxLength="40" placeholder="Enter lamp name" value="{{item::input}}"  readonly$="[[!editing]]">-->
              <paper-input always-float-label label="Lamp Name" maxLength="40" value="{{item::input}}" readonly$="[[!editing]]"></paper-input>
            </template>
          </vaadin-grid-column>
        </vaadin-grid>
      </p>
    </div>
  </template>

  <script>
    class LampsView extends Polymer.Element {
      static get is() { return 'lamps-view'; }
      ready() {
        super.ready();
      }
      static get properties() {
        return {
          editing: { type: Boolean, value: false },
          numberleds: { type: Number, value: 2 },
          lampmapping: { type: Array, value: ["lamp1", "lamp2"] }
        }
      }
      resizeLampList() {
        if (this.lampmapping.length < this.numberleds) {
          for (var i=this.lampmapping.length; i<this.numberleds; ++i) {
            this.push('lampmapping', "lamp"+(i+1));
          }
        } else if (this.lampmapping.length > this.numberleds) {
          for (var i=this.lampmapping.length-1; i>=this.numberleds; --i) {
            this.pop('lampmapping');
          }
        }
      }
    }

    window.customElements.define(LampsView.is, LampsView);

  </script>
</dom-module>
