import angular from 'angular'
import _ from 'lodash'
import template from './icon.html'
import IconService from './icon.service'

angular.module('app').directive('mflyIcon', function mflyIcon() {

	return {
		replace: true,
		restrict: 'E',
		scope: {
			cssClass: '@',
			kind: '='
		},
		template,

		link($scope: ScopeKeyValuePair, element) {

			const setFaKind = (newKind, oldKind) => {

				// Add the correct FA classes
				element.removeClass(IconService.getCssClassForKind(oldKind))
				element.addClass(IconService.getCssClassForKind(newKind))

				// Handle any `cssClasses` for backwards compatibility
				element.addClass($scope.cssClass)
			}

			// Since we are mutating the element directly, we need our own watch.
			$scope.$watch('kind', setFaKind)
		}

	}
})