const app = require('../app')

app.component('appDashboardPage', {
  template: html`
    <app-user-area title-text="Dashboard">

      <div flex layout="row">
        <md-card flex ng-repeat="serviceCategory in $ctrl.statistics.serviceCategories">
          <md-card-content>
            <h2>{{::$ctrl.serviceCategories[serviceCategory.serviceCategory].name}}</h2>
            <div flex layout="row">
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Cartons
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 style="text-align: center">{{serviceCategory.lastMetrics[serviceCategory.serviceColumn]}}</h1>
                </md-card-content>
              </md-card>
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Labor Cost
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 ng-if="serviceCategory.lastMetrics.laborCost" style="text-align: center">$\{{Math.floor(serviceCategory.lastMetrics.laborCost) || null}}</h1>
                </md-card-content>
              </md-card>
              <md-card flex="30" md-whiteframe="15">
                <md-card-title><md-card-title-text style="text-align: center">
                  Cost per Carton
                </md-card-title-text></md-card-title>
                <md-card-content>
                  <h1 style="text-align: center">{{serviceCategory.lastMetrics.costPer | currency}}</h1>
                </md-card-content>
              </md-card>
            </div>            
            <div ng-repeat="terminal in serviceCategory.terminals">
              <table md-table>
                <thead>
                  <th align="left">
                    <h3>{{::$ctrl.terminals[terminal.terminal].name}}</h3>
                  </th>
                  <th align="right">
                    <span ng-if="$index == 0">Cost per Carton</span>
                  </th>
                </thead>
                <tbody>
                  <tr ng-repeat="laborCategory in terminal.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPer | currency}}</td>
                  </tr>
                  <tr ng-if="terminal.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{terminal.costPer | currency}}</td>
                  </tr>
                </tbody>
              </table>
              <hr />
            </div>
            <div ng-if="serviceCategory.terminals.length > 1">
              <table md-table>
                <thead>
                  <th align="left">
                    <h3>Overall</h3>
                  </th>
                  <th align="right"></th>
                </thead>
                <tbody>
                  <tr ng-repeat="laborCategory in serviceCategory.laborCategories">
                    <th align="left">{{::$ctrl.laborCategories[laborCategory.laborCategory].name}}</th>
                    <td align="right">{{laborCategory.costPer | currency}}</td>
                  </tr>
                  <tr ng-if="serviceCategory.laborCategories.length > 1">
                    <th align="left">All</th>
                    <td align="right">{{serviceCategory.costPer | currency}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </md-card-content>
        </md-card>
      </div>
      <div flex layout="column" layout-gt-sm="row">
        <md-card flex="50" class="mg-margin md-padding">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Labor Costs</span>
              <span class="md-subhead"></span>
            </md-card-title-text>
          </md-card-title>
          <md-card-content>
            <div style="width: 520px; height: 260px;" >
              <canvas class="chart chart-line" chart-data="$ctrl.charts.laborCost.data" chart-colors="$ctrl.charts.laborCost.colors"
                chart-labels="$ctrl.charts.laborCost.labels" chart-series="$ctrl.charts.laborCost.series" chart-options="$ctrl.charts.laborCost.options">
              </canvas>
            </div>
            <div ng-repeat="color in $ctrl.charts.laborCost.colors">
              <div style="background-color: {{color}}; width: 16px; height: 16px; display: inline-block; margin: 0 4px;"></div>
              {{$ctrl.charts.laborCost.series[$index]}}
            </div>
          </md-card-content>
        </md-card>
        <md-card flex="50" class="mg-margin md-padding">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Cost per Carton</span>
              <span class="md-subhead"></span>
            </md-card-title-text>
          </md-card-title>
          <md-card-content>
            <div style="width: 520px; height: 260px;" >
              <canvas class="chart chart-line" chart-data="$ctrl.charts.costPerCarton.data" chart-colors="$ctrl.charts.costPerCarton.colors"
                chart-labels="$ctrl.charts.costPerCarton.labels" chart-series="$ctrl.charts.costPerCarton.series" chart-options="$ctrl.charts.costPerCarton.options">
              </canvas>
            </div>
            <div ng-repeat="color in $ctrl.charts.costPerCarton.colors">
              <div style="background-color: {{color}}; width: 16px; height: 16px; display: inline-block; margin: 0 4px;"></div>
              {{$ctrl.charts.costPerCarton.series[$index]}}
            </div>
          </md-card-content>
        </md-card>
      </div>
    </app-user-area>
  `,
  controller: function(api, statistics, $scope) {
    $scope.Math = Math
    api.statistics().then(stats => {
      this.statistics = stats
      this.charts = statistics.charts(stats.metricsOverTime)
      this.last = stats.last
    })
    api.terminals().then(terminals => {
      this.terminals = terminals
    })
    api.laborCategories().then(laborCategories => {
      this.laborCategories = laborCategories
    })
    api.serviceCategories().then(serviceCategories => {
      this.serviceCategories = serviceCategories
    })

  //   statistics.costPerCarton().then(statistics => {
  //     Object.assign(this, statistics)
  //   })
  }
})