(function () {
  function FrontPageController(devices) {
    var ctrl = this;

    ctrl.devices = devices.data.devices;
  }

  function DeviceController($uibModal, device, DillerRpc) {
    var ctrl = this;

    ctrl.device = device.data.device;

    ctrl.editDeviceAttribute = function (attributeName) {
      var outer = ctrl;
      $uibModal.open({
        controller: function ($uibModalInstance) {
          var ctrl = this;

          ctrl.attributeName = attributeName;
          ctrl.value = outer.device[attributeName];

          ctrl.value = 'yoyo';

          ctrl.update = function () {

            DillerRpc.patchDevice(outer.device.id, {attribute: attributeName, value: ctrl.value})
              .then(function (res) {
                $uibModalInstance.close({});
              });
          };
        },
        controllerAs: 'ctrl',
        bindToController: true,
        templateUrl: 'app/templates/device-edit-attribute.modal.html'
      });
    }
  }

  function PropertyController($timeout, $route, DillerRpc, device, values) {
    var ctrl = this;

    ctrl.device = device.data.device;
    ctrl.property = _.find(ctrl.device.properties, {id: $route.current.params.propertyId});
    ctrl.values = values.data.values;

    var refreshPromise;
    ctrl.refresh = function () {
      $timeout.cancel(refreshPromise);
      refreshPromise = $timeout(function () {
        ctrl.loading = true;
      }, 200);

      DillerRpc.getValues($route.current.params.propertyId).then(function (res) {
        ctrl.values = res.data.values;
        ctrl.loading = false;
        $timeout.cancel(refreshPromise);
      })
    };
  }

  function TimestampFilter() {
    return function (value) {
      if (!value) {
        return;
      }

      return moment(value).startOf('second').fromNow();
    }
  }

  function DlTimestampDirective() {
    console.log('DlTimestampDirective', DlTimestampDirective);
    return {
      restrict: 'E',
      scope: {
        value: '='
      },
      replace: true,
      template: '<span title="{{value|date:\'medium\'}}">{{value|timestamp}}</span>'
    };
  }

  function DlDotsDirective() {
    return {
      restrict: 'E',
      scope: {
        value: '='
      },
      replace: true,
      template: '<span class="dl-dots"><span>.</span><span>.</span><span>.</span></span>\n'
    };
  }

  function config($routeProvider) {
    $routeProvider
      .when('/', {
        controller: FrontPageController,
        controllerAs: 'ctrl',
        templateUrl: 'app/templates/front-page.html',
        resolve: {
          devices: DillerRpcResolve.getDevices
        }
      })
      .when('/device/:deviceId', {
        controller: DeviceController,
        controllerAs: 'ctrl',
        templateUrl: 'app/templates/device.html',
        resolve: {
          device: DillerRpcResolve.getDevice
        }
      })
      .when('/device/:deviceId/property/:propertyId', {
        controller: PropertyController,
        controllerAs: 'ctrl',
        templateUrl: 'app/templates/property.html',
        resolve: {
          device: DillerRpcResolve.getDevice,
          values: DillerRpcResolve.getValues
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  }

  function DillerConfig() {
    var head = document.getElementsByTagName('head')[0];
    var base = head.getElementsByTagName('base')[0];
    console.log('base =', base);
    var baseUrl = base.href.replace(/\/$/, '');
    console.log('baseUrl =', baseUrl);
    return {
      baseUrl: baseUrl
    };
  }

  angular
    .module('Diller', ['ngRoute', 'ui.bootstrap'])
    .config(config)
    .filter('timestamp', TimestampFilter)
    .directive('dlTimestamp', DlTimestampDirective)
    .directive('dlDots', DlDotsDirective)
    .service('DillerConfig', DillerConfig)
    .service('DillerRpc', DillerRpc);
})();