'use strict';
//dependent upon on Bootstrap

app.directive('hardwareInfo', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      device: '='
    },
    template: '<a title="{{device.name}} Info" ng-click="showInfoModal()"><i class="fa fa-fw fa-info-circle"></i></a>',
    controller: function($scope, $templateCache, $state, $timeout, $modal, Systems) {
      
      var infoModal = $modal({ scope: $scope, 
                               title: $scope.device.name + ' Info', 
                               template: 'hardware-info.html', 
                               show: false });
      
      $scope.showInfoModal = function() {
        $scope.isLoading = true;
        $scope.isSuccess = false;
        $scope.isError = false;

        infoModal.$promise.then(infoModal.show);

        //$timeout(function() {
          Systems.searchHardware(false, $scope.device.type, {mac: $scope.device.mac})
          .then(function(data) {
            $scope.isLoading = false;
            $scope.isSuccess = true;
            console.log(data);
            $scope.searchedDevice = data.searchedDevices[0];
          })
          .catch(function(error) {
            $scope.isLoading = false;
            $scope.isError = true;
          });
          
        //}, 4000);
      };


    }
  };
});