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

app.component('appLaborEntryPage', {
  template: html`
  <app-user-area title-text="{{ctrl.terminalKey}} Labor Entry">
    <app-breadcrumb links="[
      { text: 'Home', link: '/dashboard' },
      { text: ctrl.terminalKey + ' Labor', link: '/labor/' + ctrl.terminalKey },
      { text: ctrl.startDate.format('L') + ' - ' + ctrl.endDate.format('L'), link: '/labor/' + ctrl.terminalKey + '/' + ctrl.startDate.format('YYYY-MM-DD') }
    ]"></app-breadcrumb>
    <p>For week of {{::ctrl.startDate.format('LL')}} to {{::ctrl.endDate.format('LL')}}</p>
    <form name="form" ng-submit="ctrl.submit()">
      <table md-table md-progress="ctrl.promise">
        <colgroup>
          <col style="width: 15%" />
          <col ng-repeat="weekday in ::ctrl.weekdays" style="width: 12%" />
        </colgroup>
        <thead md-head>
          <tr md-row>
            <th md-column>Staff Member</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>
          </tr>
        </thead>
        <tbody md-body>
          <tr md-row ng-repeat="sfl in ::ctrl.staffMemberLabor track by sfl.id">
            <td md-cell>
              {{::ctrl.staffMembers[sfl.id].name}}
            </td>
            <td md-cell ng-repeat="day in ::sfl.days track by $index">
              <input class="hour-input md-button md-raised" ng-model="day.hours" type="number" min="0" step="0.01">
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <md-button type="submit" class="md-raised md-primary">Submit</md-button>
      </div>
    </form>
  </app-user-area>
  `,
  controllerAs: 'ctrl',
  controller: function(api, $routeParams, weekdays, $mdToast) {
    this.weekdays = weekdays
    this.terminalKey = $routeParams.terminal
    const week = moment($routeParams.week)
    if (!week.isSame(week.startOf('week'))) throw new Error('Date is not start of week')
    this.startDate = week
    this.endDate = week.endOf('week')
    api.staffMemberDictionary().then(staffMembers => {
      this.staffMembers = staffMembers
    })
    this.promise = api.get(`/api/labor/${$routeParams.terminal}/${$routeParams.week}`).then(({workdays}) => {
      this.model = workdays
      const staffMemberIds = workdays[0].labor.map(x => x.staffMemberId)
      this.staffMemberLabor = staffMemberIds.map((id, i) => ({
        id,
        days: this.model.map(wd => wd.labor[i])
      }))
    })

    this.submit = async () => {
      const model = {
        workdays: this.model.map(workday => ({
          labor: workday.labor.map(labor => ({
            staffMemberId: labor.staffMemberId,
            hours: labor.hours || null
          }))
        }))
      }
      try {
        await api.patch(`/api/labor/${$routeParams.terminal}/${$routeParams.week}`, model)
        $mdToast.showSimple('Labor saved.')
      } catch (err) {
        window.err = err
        console.error(err)
        $mdToast.showSimple(`Could not save Labor: ${err.message || err.statusText || err}`)
      }
    }
  }
})