'use strict';

angular
  .module('habitrpg')
  .directive('popoverHtmlPopup', popoverHtmlPopup)
  .run(loadPopupTemplate);

popoverHtmlPopup.$inject = [
  '$sce'
];

function popoverHtmlPopup($sce) {
  return {
      restrict: 'EA',
      replace: true,
      scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
      link: function(scope, element, attrs) {
        scope.$watch('content', function(value, oldValue) {
          scope.unsafeContent = $sce.trustAsHtml(scope.content);
        });
      },
      templateUrl: 'template/popover/popover-html.html'
  };
}

/*
 * TODO: Review whether it's appropriate to be seeding this into the
 * templateCache like this. Feel like this might be an antipattern?
 */

loadPopupTemplate.$inject = [
  '$templateCache'
];

function loadPopupTemplate($templateCache) {
  $templateCache.put("template/popover/popover-html.html",
    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"arrow\"></div>\n" +
    "\n" +
    "  <div class=\"popover-inner\">\n" +
    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
    "      <div class=\"popover-content\" ng-bind-html=\"unsafeContent\" style=\"word-wrap: break-word\">    </div>\n" +
    "  </div>\n" +
    "</div>\n");
}