const { pages } = require('@alancnet/material-framework/app/crud')
const { dollarIcon } = require('../assets')

pages({
  camelName: 'staffMember',
  apiPrefix: '/api/staff-members/:terminal',
  appPrefix: '/staff-members/:terminal',
  titles: {
    details: ctrl => ctrl.isNew
    ? `New ${ctrl.$routeParams.terminal == 'all' ? '' : ctrl.$routeParams.terminal} Staff Member`
    : `${ctrl.$routeParams.terminal == 'all' ? '' : ctrl.$routeParams.terminal} Staff Member Details`,
    list: ctrl => `${ctrl.$routeParams.terminal == 'all' ? 'All' : ctrl.$routeParams.terminal} Staff Members`
  },
  columns: [
    { camelName: 'name', row: 1 },
    { camelName: 'title', row: 2 },
    {
      titleName: 'Category',
      camelName: 'laborCategoryId',
      type: 'autocomplete',
      apiPrefix: '/api/labor-categories'
    },
    {
      titleName: 'terminal',
      camelName: 'terminalId',
      routeParam: 'terminal',
      type: 'autocomplete',
      apiPrefix: '/api/terminals'
    },
    {
      titleName: 'Staffing Agency',
      camelName: 'staffingAgencyId',
      type: 'autocomplete',
      apiPrefix: '/api/staffing-agencies'
    },
    {
      inList: false,
      camelName: 'wage',
      type: 'currency',
      field: html`
        <md-input-container flex ng-if="$ctrl.api.claims['INCOME_' + $ctrl.laborCategoryKey + '_VIEW']">
          <label>Wage</label>
          <input type="number" step="0.01" ng-model="model.wage" />
          <md-icon md-svg-src="${dollarIcon}"></md-icon>
        </md-input-container>
      `
    },
    {
      inList: false,
      camelName: 'salary',
      type: 'currency',
      field: html`
        <md-input-container flex ng-if="$ctrl.api.claims['INCOME_' + $ctrl.laborCategoryKey + '_VIEW']">
          <label>Salary</label>
          <input type="number" step="0.01" ng-model="model.salary" />
          <md-icon md-svg-src="${dollarIcon}"></md-icon>
        </md-input-container>
      `
    }
  ],
  controllers: {
    details: function() {
      this.loadingPromise.then(async () => {
        const cats = await this.api.laborCategoryDictionary()
        const unwatch = this.$scope.$watch('model.laborCategoryId', (laborCategoryId) => {
          if (laborCategoryId) {
            this.laborCategoryKey = cats[laborCategoryId].key
          } else {
            this.laborCategoryKey = null
          }
        })
        this.$scope.$on('$destroy', unwatch)
      })
    }
  },
  layout: [
    {
      section: null,
      rows: [
        [ 'name', 'title', ],
        [ 'laborCategoryId', 'terminalId' ]
      ]
    },
    {
      section: 'Staffing information',
      rows: [
        [ 'wage', 'salary', 'staffingAgencyId' ]
      ]
    }
  ]
})