const app = require('../app')
const { Set } = require('immutable')

app.component('appPermissionsSelect', {
  template: html`
      <md-list>
        <md-subheader>Permissions</md-subheader>
        <md-list-item ng-repeat="permission in ::$ctrl.permissions track by permission.key" md-long-text>
          <md-checkbox ng-model="message.selected" ng-checked="$ctrl.set.has(permission.key)" ng-click="$ctrl.toggle(permission.key)"></md-checkbox>
          <div class="md-list-item-text">
            <h3>{{permission.key}}</h3>
            <p>{{permission.description}}</p>
          </div>
        </md-list-item>
      </md-list>
  `,
  bindings: {
    ngModel: '='
  },
  controller: function(api, $scope) {

    api.get('/api/auth/permissions').then(x => {
      this.permissions = x
    })

    const modelWatcher = $scope.$watch('$ctrl.ngModel', (model) => {
      if (model) {
        this.set = new Set(model.split(','))
      } else {
        this.set = new Set()
      }
    })

    $scope.$on('$destroy', () => modelWatcher())

    this.toggle = permission => {
      if (this.set.has(permission)) {
        this.set = this.set.remove(permission)
      } else {
        this.set = this.set.add(permission)
      }
      this.ngModel = this.set.join(',')
    }
  }
})