/*
 * The MIT License
 *
 * Copyright (c) 2016 Juan Cruz Viotti. https://github.com/jviotti
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

'use strict';

/**
 * @module angular-if-state
 */

var angular = require('angular');
var MODULE_NAME = 'angular-if-state';
var AngularIfState = angular.module(MODULE_NAME, [
  require('angular-ui-router')
]);

/**
 * @summary ShowIfState directive
 * @function
 * @public
 *
 * @description
 * This directive provides an attribute to show an element
 * when the current UI Router state matches the specified one.
 *
 * @param {Object} $state - ui router $state
 * @returns {Object} directive
 *
 * @example
 * <button show-if-state="main" ui-sref="settings">Settings</button>
 */
AngularIfState.directive('showIfState', function($state) {
  return {
    restrict: 'A',
    scope: {
      showIfState: '@'
    },
    link: function(scope, element) {
      scope.$watch(function() {
        return $state.is(scope.showIfState);
      }, function(isState) {

        if (isState) {
          element.css('display', 'initial');
        } else {
          element.css('display', 'none');
        }

      });
    }
  };
});

/**
 * @summary HideIfState directive
 * @function
 * @public
 *
 * @description
 * This directive provides an attribute to hide an element
 * when the current UI Router state matches the specified one.
 *
 * @param {Object} $state - ui router $state
 * @returns {Object} directive
 *
 * @example
 * <button hide-if-state="settings" ui-sref="main">Go Back</button>
 */
AngularIfState.directive('hideIfState', function($state) {
  return {
    restrict: 'A',
    scope: {
      hideIfState: '@'
    },
    link: function(scope, element) {
      scope.$watch(function() {
        return $state.is(scope.hideIfState);
      }, function(isState) {

        if (isState) {
          element.css('display', 'none');
        } else {
          element.css('display', 'initial');
        }

      });
    }
  };
});

module.exports = MODULE_NAME;
