import { __assign } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { memoizeFunction, css } from '@uifabric-vue/utilities';
import { getIcon } from '@uifabric/styling';
import Vue from 'vue';
import { MS_ICON, classNames } from './Icon.styles.js';

var getIconContent = memoizeFunction(function(iconName) {
  var _a = getIcon(iconName) || {
    subset: {},
    code: void 0
  }, code = _a.code, subset = _a.subset;
  if (!code) {
    return null;
  }
  return {
    children: code,
    iconClassName: subset.className,
    fontFamily: subset.fontFace && subset.fontFace.fontFamily,
    mergeImageProps: subset.mergeImageProps
  };
}, void 0, true);
var FontIcon = Vue.extend({
  functional: true,
  props: __assign(__assign({}, withThemeableProps()), { iconName: { type: String, default: "" } }),
  render: function(h, ctx) {
    var _a = ctx.props, iconName = _a.iconName, className = _a.className, _b = _a.style, style = _b === void 0 ? {} : _b;
    var iconContent = getIconContent(iconName) || {};
    var iconClassName = iconContent.iconClassName, children = iconContent.children, fontFamily = iconContent.fontFamily;
    return h("i", {
      attrs: {
        "data-icon-name": iconName
      },
      class: css(MS_ICON, classNames.root, iconClassName, !iconName && classNames.placeholder, className),
      style: __assign({ fontFamily: fontFamily }, style)
    }, children);
  }
});

export { FontIcon, getIconContent };
