import { getMenuItemStyles } from './ContextualMenu.cnstyles.js';
import { getScreenSelector, ScreenWidthMaxMedium, getGlobalClassNames, mergeStyleSets } from '@uifabric/styling';
import { memoizeFunction, IsFocusVisibleClassName } from '@uifabric-vue/utilities';

var CONTEXTUAL_SPLIT_MENU_MINWIDTH = "28px";
getScreenSelector(0, ScreenWidthMaxMedium);
memoizeFunction(function(theme) {
});
var GlobalClassNames = {
  item: "ms-ContextualMenu-item",
  divider: "ms-ContextualMenu-divider",
  root: "ms-ContextualMenu-link",
  isChecked: "is-checked",
  isExpanded: "is-expanded",
  isDisabled: "is-disabled",
  linkContent: "ms-ContextualMenu-linkContent",
  linkContentMenu: "ms-ContextualMenu-linkContent",
  icon: "ms-ContextualMenu-icon",
  iconColor: "ms-ContextualMenu-iconColor",
  checkmarkIcon: "ms-ContextualMenu-checkmarkIcon",
  subMenuIcon: "ms-ContextualMenu-submenuIcon",
  label: "ms-ContextualMenu-itemText",
  secondaryText: "ms-ContextualMenu-secondaryText",
  splitMenu: "ms-ContextualMenu-splitMenu"
};
var getItemClassNames = memoizeFunction(function(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {
  var _a, _b, _c, _d;
  var styles = getMenuItemStyles(theme);
  var classNames = getGlobalClassNames(GlobalClassNames, theme);
  return mergeStyleSets({
    item: [classNames.item, styles.item, itemClassName],
    divider: [classNames.divider, styles.divider, dividerClassName],
    root: [
      classNames.root,
      styles.root,
      checked && [classNames.isChecked, styles.rootChecked],
      isAnchorLink && styles.anchorLink,
      expanded && [classNames.isExpanded, styles.rootExpanded],
      disabled && [classNames.isDisabled, styles.rootDisabled],
      !disabled && !expanded && [
        {
          selectors: (_a = {
            ":hover": styles.rootHovered,
            ":active": styles.rootPressed
          }, _a[".".concat(IsFocusVisibleClassName, " &:focus, .").concat(IsFocusVisibleClassName, " &:focus:hover")] = styles.rootFocused, _a[".".concat(IsFocusVisibleClassName, " &:hover")] = { background: "inherit;" }, _a)
        }
      ],
      className
    ],
    splitPrimary: [
      styles.root,
      {
        width: "calc(100% - ".concat(CONTEXTUAL_SPLIT_MENU_MINWIDTH, ")")
      },
      checked && ["is-checked", styles.rootChecked],
      (disabled || primaryDisabled) && ["is-disabled", styles.rootDisabled],
      !(disabled || primaryDisabled) && !checked && [
        {
          selectors: (_b = {
            ":hover": styles.rootHovered
          }, _b[":hover ~ .".concat(classNames.splitMenu)] = styles.rootHovered, _b[":active"] = styles.rootPressed, _b[".".concat(IsFocusVisibleClassName, " &:focus, .").concat(IsFocusVisibleClassName, " &:focus:hover")] = styles.rootFocused, _b[".".concat(IsFocusVisibleClassName, " &:hover")] = { background: "inherit;" }, _b)
        }
      ]
    ],
    splitMenu: [
      classNames.splitMenu,
      styles.root,
      {
        flexBasis: "0",
        padding: "0 8px",
        minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH
      },
      expanded && ["is-expanded", styles.rootExpanded],
      disabled && ["is-disabled", styles.rootDisabled],
      !disabled && !expanded && [
        {
          selectors: (_c = {
            ":hover": styles.rootHovered,
            ":active": styles.rootPressed
          }, _c[".".concat(IsFocusVisibleClassName, " &:focus, .").concat(IsFocusVisibleClassName, " &:focus:hover")] = styles.rootFocused, _c[".".concat(IsFocusVisibleClassName, " &:hover")] = { background: "inherit;" }, _c)
        }
      ]
    ],
    anchorLink: styles.anchorLink,
    linkContent: [classNames.linkContent, styles.linkContent],
    linkContentMenu: [
      classNames.linkContentMenu,
      styles.linkContent,
      {
        justifyContent: "center"
      }
    ],
    icon: [
      classNames.icon,
      knownIcon && styles.iconColor,
      styles.icon,
      iconClassName,
      disabled && [classNames.isDisabled, styles.iconDisabled]
    ],
    iconColor: styles.iconColor,
    checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],
    subMenuIcon: [
      classNames.subMenuIcon,
      styles.subMenuIcon,
      subMenuClassName,
      expanded && { color: theme.palette.neutralPrimary },
      disabled && [styles.iconDisabled]
    ],
    label: [classNames.label, styles.label],
    secondaryText: [classNames.secondaryText, styles.secondaryText],
    splitContainer: [
      styles.splitButtonFlexContainer,
      !disabled && !checked && [
        {
          selectors: (_d = {}, _d[".".concat(IsFocusVisibleClassName, " &:focus, .").concat(IsFocusVisibleClassName, " &:focus:hover")] = styles.rootFocused, _d)
        }
      ]
    ]
  });
});
var getItemStyles = function(props) {
  var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;
  return getItemClassNames(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);
};

export { getItemClassNames, getItemStyles };
