<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<link rel="import" href="../elements/xinu-email-unread.html">

<script src="../bower_components/moment/moment.js"></script>

<polymer-element name="xinu-email-app">
    <template>
    <style>
:host {
    height: 100%;
}

core-header-panel {
    height: 100%;
}

core-header-panel[mode=cover]::shadow #mainContainer {
    left: 70px;
}

.core-header {
    height: 4em;
    line-height: 2em;
    font-size: 18px;
    padding: 0 10px;
    background-color: #4F7DC9;
    color: #FFF;
    transition: height 0.2s;
}

.core-header.tall {
    height: 180px;
}

.core-header.medium-tall {
    height: 120px;
}

#net-stats {
    font-size: 12px;
}

paper-fab#refresh-button {
    background: #080;
    margin: 10px;
}
    </style>
        <core-ajax
            id="fetch"
            url="/unread?format=list"
            handleAs="json"
            response="{{boxes}}"
            on-core-response="{{handleResponse}}">
        </core-ajax>
        <core-header-panel flex mode="waterfall">
            <div class="core-header" horizontal layout center>
                <div flex>Unread</div>
                <div id="net-stats">{{latency}} ms @ {{lastRefresh}}</div>
                <paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
            </div>
            <div class="content">
                <xinu-email-unread boxes="{{boxes}}"></xinu-email-unread>
            </div>
        </core-header-panel>
    </template>

    <script>
var pollingIntervalMS = 30 * 1000
Polymer('xinu-email-app', {
  log: function() {
    console.log('xinu-email-app ', arguments);
  },
  ready: function() {
    this.log('ready');
    this.handleRefresh();
  },
  handleRefresh: function(event, detail, sender) {
    this.lastRequest = moment();
    this.log('handleRefresh');
    this.$.fetch.go();
    this.job('refreshLoop', function() { // first arg is the name of the "job"
        this.handleRefresh();
    }, pollingIntervalMS);
  },
  handleResponse: function(event, detail, sender) {
    var now = moment();
    this.lastRefresh = now.format('h:mm:ss');
    this.latency = moment(now - this.lastRequest).millisecond();
  }
});
    </script>
</polymer-element>

