const app = require('../app')
const moment = require('moment-immutable')
const { editIcon, calculatedIcon, dollarIcon } = 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>
    <div>
      <md-input-container class="md-margin">
        <label>Labor Cost</label>
        <input type="text" readonly value="{{ctrl.model.workweek.laborCost | currency}}" />
        <md-icon md-svg-src="${calculatedIcon}">
          <md-tooltip md-direction="down" style="height: 7em">
            This field is calculated, <br/>
            and cannot be edited directly. <br />
            Save your changes to update.
          </md-tooltip>
        </md-icon>
      </md-input-container>
      <md-input-container class="md-margin">
        <label>Labor Charge</label>
        <input type="number" min="0" step="0.01" ng-model="ctrl.model.workweek.laborCharge" />
        <md-icon md-svg-src="${dollarIcon}"></md-icon>
      </md-input-container>
      <md-input-container class="md-margin" ng-if="ctrl.model.workweek.laborCharge && ctrl.model.workweek.laborCost">
        <label>Difference</label>
        <input type="text" readonly value="{{(ctrl.model.workweek.laborCost - ctrl.model.workweek.laborCharge) | currency}} or {{(ctrl.model.workweek.laborCharge / ctrl.model.workweek.laborCost) * 100 | number : 1}}%" />
        <md-icon md-svg-src="${calculatedIcon}">
          <md-tooltip md-direction="down" style="height: 7em">
            This field is calculated, <br/>
            and cannot be edited directly. <br />
            Save your changes to update.
          </md-tooltip>
        </md-icon>
      </md-input-container>
    </div>
    <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.model.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"
                tabindex="{{$index * ctrl.staffMemberLabor.length + ($parent.$index) + 1}}"
                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
    })
    const load = () => {
      this.promise = api.get(`/api/labor/${$routeParams.terminal}/${$routeParams.week}`).then((model) => {
        this.model = model
        const staffMemberIds = this.model.workdays[0].labor.map(x => x.staffMemberId)
        this.staffMemberLabor = staffMemberIds.map((id, i) => ({
          id,
          days: this.model.workdays.map(wd => wd.labor[i])
        }))
      })
    }
    load()
    this.submit = async () => {
      const model = {
        workweek: this.model.workweek,
        workdays: this.model.workdays.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.')
        load()
      } catch (err) {
        window.err = err
        console.error(err)
        $mdToast.showSimple(`Could not save Labor: ${err.message || err.statusText || err}`)
      }
    }
  }
})