text: import template from './ms-material-color-picker.html';
  import angular from 'angular';
  
  function msMaterialColorPickerController($scope, $mdColorPalette, $mdMenu, fuseGenerator) {
      'ngInject';
  	'use strict';
  
      var vm = this;
      vm.palettes = $mdColorPalette; // Material Color Palette
      vm.selectedPalette = false;
      vm.selectedHues = false;
      $scope.$selectedColor = {};
  
      // Methods
      vm.activateHueSelection = activateHueSelection;
      vm.selectColor = selectColor;
      vm.removeColor = removeColor;
  
      /**
       * Initialize / Watch model changes
       */
      $scope.$watch('ngModel', setSelectedColor);
  
      /**
       * Activate Hue Selection
       * @param palette
       * @param hues
       */
      function activateHueSelection(palette, hues) {
          vm.selectedPalette = palette;
          vm.selectedHues = hues;
      }
  
      /**
       * Select Color
       * @type {selectColor}
       */
      function selectColor(palette, hue) {
          // Update Selected Color
          updateSelectedColor(palette, hue);
  
          // Update Model Value
          updateModel();
  
          // Hide The picker
          $mdMenu.hide();
      }
  
      function removeColor() {
          vm.selectedColor = {
              palette: '',
              hue: '',
              class: ''
          };
  
          activateHueSelection(false, false);
  
          updateModel();
      }
  
      /**
       * Set SelectedColor by model type
       */
      function setSelectedColor() {
          if (!vm.modelCtrl.$viewValue || vm.modelCtrl.$viewValue === '') {
              removeColor();
              return;
          }
  
          var palette, hue;
  
          // If ModelType Class
          if (vm.msModelType === 'class') {
              var color = vm.modelCtrl.$viewValue.split('-');
              if (color.length >= 5) {
                  palette = color[1] + '-' + color[2];
                  hue = color[3];
              } else {
                  palette = color[1];
                  hue = color[2];
              }
          }
  
          // If ModelType Object
          else if (vm.msModelType === 'obj') {
              palette = vm.modelCtrl.$viewValue.palette;
              hue = vm.modelCtrl.$viewValue.hue || 500;
          }
  
          // Update Selected Color
          updateSelectedColor(palette, hue);
      }
  
      /**
       * Update Selected Color
       * @param palette
       * @param hue
       */
      function updateSelectedColor(palette, hue) {
          vm.selectedColor = {
              palette: palette,
              hue: hue,
              class: 'md-' + palette + '-' + hue + '-bg',
              bgColorValue: fuseGenerator.rgba(vm.palettes[palette][hue].value),
              fgColorValue: fuseGenerator.rgba(vm.palettes[palette][hue].contrast)
          };
  
          // If Model object not Equals the selectedColor update it
          // it can be happen when the model only have pallete and hue values
          if (vm.msModelType === 'obj' && !angular.equals(vm.selectedColor, vm.modelCtrl.$viewValue)) {
              // Update Model Value
              updateModel();
          }
  
          activateHueSelection(palette, vm.palettes[palette]);
  
          $scope.$selectedColor = vm.selectedColor;
      }
  
      /**
       * Update Model Value by model type
       */
      function updateModel() {
          if (vm.msModelType === 'class') {
              vm.modelCtrl.$setViewValue(vm.selectedColor.class);
          } else if (vm.msModelType === 'obj') {
              vm.modelCtrl.$setViewValue(vm.selectedColor);
          }
      }
  }
  
  function msMaterialColorPicker() {
  	'ngInject';
      'use strict';
  
      return {
          require: ['msMaterialColorPicker', 'ngModel'],
          restrict: 'E',
          scope: {
              ngModel: '=',
              msModelType: '@?'
          },
          controller: 'msMaterialColorPickerController as vm',
          transclude: true,
          template,
          link: function(scope, element, attrs, controllers, transclude) {
              var ctrl = controllers[0];
  
              /**
               *  Pass model controller to directive controller
               */
              ctrl.modelCtrl = controllers[1];
  
              /**
               * ModelType: 'obj', 'class'(default)
               * @type {string|string}
               */
              ctrl.msModelType = scope.msModelType || 'class';
  
              transclude(scope, function(clone) {
                  clone = clone.filter(function(i, el) {
                      return (el.nodeType === 1) ? true : false;
                  });
  
                  if (clone.length) {
                      element.find('ms-color-picker-button').replaceWith(clone);
                  }
              });
          }
      };
  }
  export { msMaterialColorPickerController, msMaterialColorPicker };
  