const app = require('../app')
const { editIcon } = require('../assets')

app.component('appServicesPage', {
  template: html`
    <app-user-area>
      <app-breadcrumb links="[
        { text: 'Home', link: '/dashboard' },
        { text: ctrl.locationKey + ' Services', link: '/services/' + ctrl.locationKey }
      ]"></app-breadcrumb>

      <h1>Services</h1>
      <table md-table ng-model="ctrl.selected" md-progress="ctrl.promise">
        <thead md-head>
          <tr md-row>
            <th md-column>Week Starting</th>
            <th md-column ng-repeat="weekday in ::ctrl.weekdays">
              <span hide show-xs>{{::weekday.min}}</span>
              <span hide show-sm>{{::weekday.short}}</span>
              <span hide show-gt-sm>{{::weekday.name}}</span>
            </th>
            <th md-column>Actions</th>
          </tr>
        </thead>
        <tbody md-body>
          <tr md-row ng-repeat="week in ::ctrl.services track by week.workweek">
            <td md-cell>
              {{::week.workweek}}
            </td>
            <td md-cell ng-repeat="workday in ::week.workdays track by $index">
              <div>
                <span ng-if="::workday" style="white-space: nowrap;">
                  {{::workday.cartons || 0}}
                  <span hide show-xs>c</span>
                  <span hide show-sm>ctn</span>
                  <span hide show-gt-sm>cartons</span>
                </span>
                <span ng-if="::!workday" md-colors="{ color: 'primary-100' }">
                  N/A
                </span>
              </div>
            </td>
            <td md-cell>
              <md-button ng-href="services/{{::ctrl.location.key}}/{{::week.workweek}}">
                <md-icon md-svg-icon="${editIcon}"></md-icon>
                Edit
              </md-button>
            </td>
          </tr>
        </tbody>
      </table>

    </app-user-area>
  `,
  controllerAs: 'ctrl',
  controller: function(api, $routeParams, weekdays) {
    this.locationKey = $routeParams.location
    this.weekdays = weekdays
    api.location($routeParams.location).then(location => {
      this.location = location
    })
    this.promise = api.get(`/api/services/${$routeParams.location}`).then(services => {
      this.services = services
    })
  }
})