<!DOCTYPE html>
<html>

  <head>
    <script src="//unpkg.com/angular@1.6.1/angular.js"></script>
    <script src="//unpkg.com/angular-ui-router@1.0.0-rc.1/release/angular-ui-router.js"></script>
    <script src="script.js"></script>
    <script src="components/users.js"></script>
    <script src="components/userDetail.js"></script>
    <style>
      a.deactivated {
        color: lightgrey;
      }
      li.userselected {
        font-weight: bolder;
      }
    </style>
  </head>

  <body ng-app="app">
    <ui-view></ui-view>
  </body>

</html>
"use babel";
let app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlServiceProvider) {
  $urlServiceProvider.rules.otherwise({ state: 'userlist' });
  
  $stateProvider.state('userlist', {
    url: '/users',
    component: 'users',
    resolve: {
      users: function(UserService) {
        return UserService.list();
      }
    }
  });
    
  $stateProvider.state('userlist.detail', {
    url: '/:userId',
    component: 'userDetail',
    resolve: {
      user: function($transition$, users) {
        return users.find(user => user.id == $transition$.params().userId);
      }
    }
  });

});

app.service('UserService', function($http) { 
  return {
    list: function() {
      return $http.get('./data/users.json', { cache: true }).then(resp => resp.data)
    }
  };
});

// preload resources in case plunker times out
app.run(function($http, $templateRequest) {
  $http.get('data/users.json', { cache: true });
})
[
  {
    "address": "228 Vandervoort Avenue, Valmy, New Jersey, 4440",
    "active": true,
    "phone": "+1 (933) 526-2295",
    "email": "undefined.undefined@buzzworks.ca",
    "company": "BUZZWORKS",
    "name": "Katherine Kennedy",
    "eyeColor": "brown",
    "age": 22,
    "id": 709
  },
  {
    "address": "157 Crawford Avenue, Vernon, Virgin Islands, 8555",
    "active": true,
    "phone": "+1 (905) 406-2385",
    "email": "undefined.undefined@jamnation.org",
    "company": "JAMNATION",
    "name": "Eugenia Ward",
    "eyeColor": "brown",
    "age": 37,
    "id": 182
  },
  {
    "address": "874 Elizabeth Place, Craig, New Mexico, 6187",
    "active": true,
    "phone": "+1 (812) 521-3909",
    "email": "undefined.undefined@grainspot.biz",
    "company": "GRAINSPOT",
    "name": "Myers Love",
    "eyeColor": "green",
    "age": 21,
    "id": 790
  },
  {
    "address": "307 Hoyt Street, Glidden, Vermont, 6260",
    "active": true,
    "phone": "+1 (876) 593-2605",
    "email": "undefined.undefined@applica.me",
    "company": "APPLICA",
    "name": "Ida Decker",
    "eyeColor": "brown",
    "age": 40,
    "id": 336
  },
  {
    "address": "139 Dooley Street, Darbydale, Texas, 9146",
    "active": true,
    "phone": "+1 (986) 407-3771",
    "email": "undefined.undefined@concility.us",
    "company": "CONCILITY",
    "name": "Castaneda Rice",
    "eyeColor": "brown",
    "age": 32,
    "id": 213
  }
]
angular.module('app')
.component('users', {
  bindings: { users: '<' },
  controller: function() {
    this.clickHandler = function() {
      alert('something');
    }
  },
  template: `
    <h1>Users</h1>
    
    <button ng-click="$ctrl.clickHandler()">Do something</button>
    
    <ul>
      <li ng-repeat="user in $ctrl.users" ui-sref-active="userselected">
        <a ui-sref="userlist.detail({ userId: user.id })" 
            ng-disabled="!user.active"
            ng-class="{ deactivated: !user.active }">
          {{ user.name }}
        </a>
        
        <button ng-click="user.active = !user.active">
          {{ user.active ? "Deactivate" : "Activate" }}
        </button>
      </li>
    </ul>
    
    <div ui-view></div>
`,
})
angular.module('app')
.component('userDetail', {
  bindings: { user: '<' },
  template: `
    <h3>User {{ $ctrl.user.id }}</h3>
    
    <h2>{{ $ctrl.user.name }} {{ !$ctrl.user.active ? "(Deactivated)" : "" }}</h2>
    
    <table>
      <tr><td>Address</td><td>{{ $ctrl.user.address }}</td></tr>
      <tr><td>Phone</td><td>{{ $ctrl.user.phone }}</td></tr>
      <tr><td>Email</td><td>{{ $ctrl.user.email }}</td></tr>
      <tr><td>Company</td><td>{{ $ctrl.user.company }}</td></tr>
      <tr><td>Age</td><td>{{ $ctrl.user.age }}</td></tr>
    </table>
`,
})