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

app.component('appUserAreaNav', {
  template: html`
    <h3>
      Intelligence
    </h3>

    <md-menu-item>
      <md-button ng-href="/dashboard">
        <md-icon md-svg-icon="${dashboardIcon}"></md-icon>
        Dashboard
      </md-button>
    </md-menu-item>

    <div ng-repeat="location in ctrl.locations">
      <h3>{{::location.name}}</h3>
      <md-menu-item>
        <md-button ng-href="/labor/{{::location.key}}">
          <md-icon md-svg-icon="${laborIcon}"></md-icon>
          {{::location.key}} Labor
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button ng-href="/staff-members/{{::location.key}}">
          <md-icon md-svg-icon="${staffMemberIcon}"></md-icon>
          {{::location.key}} Staff Members
        </md-button>
      </md-menu-item>
      <md-menu-item>
        <md-button ng-href="/retailers/{{::location.key}}">
          <md-icon md-svg-icon="${retailerIcon}"></md-icon>
          {{::location.key}} Clients
        </md-button>
      </md-menu-item>
    </div>

    <h3>All</h3>
    <md-menu-item>
      <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>
      <md-button ng-href="/staffing-agencies">
        <md-icon md-svg-icon="${staffingAgencyIcon}"></md-icon>
        Staffing Agencies
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-href="/retailers/all">
        <md-icon md-svg-icon="${retailerIcon}"></md-icon>
        Clients
      </md-button>
    </md-menu-item>
    
  `,
  controllerAs: 'ctrl',
  controller: function(api) {
    window.api = api.get('/api/locations').then(locations => {
      this.locations = _.sortBy(locations, 'key')
    })
  }
})