<link rel="import" href="../../third-party/polymer/polymer.html">
<link rel="import" href="../../third-party/paper-input/paper-input.html">
<link rel="import" href="../../third-party/paper-button/paper-button.html">

<polymer-element name="p2b-publish" attributes="publishState">

  <template id="template">
    <link rel="stylesheet" href="../common/common.css">
    <link rel="stylesheet" href="component.css">
    <paper-input id="publishNameInput" label="Name to publish under (e.g. john-tablet)" error="You must pick a name!" floatinglabel/></paper-input>
    <paper-button class="paper colored" inkColor="#3367d6" on-click="{{ publishAction }}">Publish</paper-button>
  </template>
  <script>
    Polymer('p2b-publish', {

      /*
       * Publish action. Fires when user decided to publish the p2b service.
       * user-entered name of the service will be provided as value of the event
       * @event
       */
      publishAction: function() {
        var name = this.$.publishNameInput.value.trim();
        if(name === "") {
          this.$.publishNameInput.invalid = true;
          this.$.publishNameInput.classList.toggle('invalid', true);
          return;
        }
        this.fire('publish', { publishName: name  });
      }
    });
  </script>
</polymer-element>