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

<dom-module id="tempo-controller">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;

        cursor: default;
        width: 100%;
        border-bottom: 1px solid black;
      }
      .tempo-button {
        width: 40px;
        margin: 5px;
        padding: 2px;
      }
      tempo-display {
        border: 1px solid black;
        width: 90px;
        background: #ccc;
        margin: 5px;
        padding: 2px;
      }
    </style>

    <div class="tempo-button">
      <simple-button
        button-model="{{buttonModel}}"
        default-text="start" active-text="stop">
      </simple-button>
    </div>
    <tempo-display tempo="{{metronome.tempo}}"></tempo-display>

  </template>

  <script>
    (function() {
      'use strict';

      class TempoController {

        beforeRegister() {
          this.is = 'tempo-controller';

          this.properties = {
            metronome: {
              type: Object
            }
          };
        }

        ready() {}
        attached() {
          this.buttonModel = buildButtonModel.call(this);
        }
        detached() {}
        attributeChanged() {}
      }
      Polymer(TempoController);

      function buildButtonModel () {
        return {
          callback: (metronomeIsOn) => {
            metronomeIsOn ? this.metronome.start() : this.metronome.stop();
          }
        };
      }

    })();
  </script>

</dom-module>
