const app = require('../app')
const _ = require('lodash')
const { dashboardIcon, staffMemberIcon, staffingAgencyIcon, laborIcon, clientIcon, serviceIcon } = require('../assets')

app.component('appUserAreaNav', {
  template: html`
    <div ng-if="$ctrl.api.claims.METRICS_VIEW">
      <h3>
        Intelligence
      </h3>

      <md-menu-item ng-if="$ctrl.api.claims.METRICS_VIEW">
        <md-button ng-href="/dashboard">
          <md-icon md-svg-icon="${dashboardIcon}"></md-icon>
          Dashboard
        </md-button>
      </md-menu-item>
    </div>

    <div ng-repeat="terminal in $ctrl.terminals">
      <h3>{{::terminal.name}}</h3>
      <md-menu-item ng-if="$ctrl.api.claims.LABOR_VIEW">
        <md-button ng-href="/labor/{{::terminal.key}}">
          <md-icon md-svg-icon="${laborIcon}"></md-icon>
          {{::terminal.key}} Labor
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.SERVICES_VIEW">
        <md-button ng-href="/services/{{::terminal.key}}">
          <md-icon md-svg-icon="${serviceIcon}"></md-icon>
          {{::terminal.key}} Services
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.STAFF_MEMBER_VIEW">
        <md-button ng-href="/staff-members/{{::terminal.key}}">
          <md-icon md-svg-icon="${staffMemberIcon}"></md-icon>
          {{::terminal.key}} Staff Members
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.CLIENT_VIEW">
        <md-button ng-href="/clients/{{::terminal.key}}">
          <md-icon md-svg-icon="${clientIcon}"></md-icon>
          {{::terminal.key}} Clients
        </md-button>
      </md-menu-item>
    </div>

    <div ng-if="$ctrl.api.claims.TERMINAL_ALL_ACCESS">
      <h3>All</h3>
      <md-menu-item ng-if="$ctrl.api.claims.STAFF_MEMBER_VIEW">
        <md-button ng-href="/staff-members/all">
          <md-icon md-svg-icon="${staffMemberIcon}"></md-icon>
          Staff Members
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.STAFFING_AGENCY_VIEW">
        <md-button ng-href="/staffing-agencies">
          <md-icon md-svg-icon="${staffingAgencyIcon}"></md-icon>
          Staffing Agencies
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.CLIENT_VIEW">
        <md-button ng-href="/clients/all">
          <md-icon md-svg-icon="${clientIcon}"></md-icon>
          Clients
        </md-button>
      </md-menu-item>

      <md-menu-item ng-if="$ctrl.api.claims.LABOR_CATEGORY_VIEW">
        <md-button ng-href="/labor-categories">
          Labor Categories
        </md-button>
      </md-menu-item>
      <md-menu-item ng-if="$ctrl.api.claims.LABOR_CATEGORY_VIEW">
        <md-button ng-href="/service-categories">
          Service Categories
        </md-button>
      </md-menu-item>
    </div>
    
  `,
  controller: function(api) {
    this.api = api
    api.terminals().then(terminals => {
      this.terminals = _.sortBy(terminals, 'key')
        .filter(({key}) => api.claims[`TERMINAL_${key}_ACCESS`])
    })
  }
})