import { getGlobalClassNames, normalize, HighContrastSelector, getInputFocusStyle, AnimationVariables, getPlaceholderStyles } from '@uifabric/styling';
import { getRTL } from '@uifabric-vue/utilities';

var GlobalClassNames = {
  root: "ms-SearchBox",
  iconContainer: "ms-SearchBox-iconContainer",
  icon: "ms-SearchBox-icon",
  clearButton: "ms-SearchBox-clearButton",
  field: "ms-SearchBox-field"
};
function getStyles(props) {
  var _a, _b, _c, _d, _e;
  var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput, disableAnimation = props.disableAnimation, showIcon = props.showIcon;
  var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;
  var classNames = getGlobalClassNames(GlobalClassNames, theme);
  var placeholderStyles = {
    color: semanticColors.inputPlaceholderText,
    opacity: 1
  };
  var inputIconAlt = palette.neutralSecondary;
  var inputIconAltHovered = palette.neutralPrimary;
  var inputBorderDisabled = palette.neutralLighter;
  var inputBackgroundHovered = palette.neutralLighter;
  var inputBackgroundDisabled = palette.neutralLighter;
  return {
    root: [
      classNames.root,
      fonts.medium,
      normalize,
      {
        color: semanticColors.inputText,
        backgroundColor: semanticColors.inputBackground,
        display: "flex",
        flexDirection: "row",
        flexWrap: "nowrap",
        alignItems: "stretch",
        padding: "1px 0 1px 4px",
        borderRadius: effects.roundedCorner2,
        border: "1px solid ".concat(semanticColors.inputBorder),
        height: 32,
        selectors: (_a = {}, _a[HighContrastSelector] = {
          borderColor: "WindowText"
        }, _a[":hover"] = {
          borderColor: semanticColors.inputBorderHovered,
          selectors: (_b = {}, _b[HighContrastSelector] = {
            borderColor: "Highlight"
          }, _b)
        }, _a[":hover .".concat(classNames.iconContainer)] = {
          color: semanticColors.inputIconHovered
        }, _a)
      },
      !hasFocus && hasInput && {
        selectors: (_c = {}, _c[":hover .".concat(classNames.iconContainer)] = {
          width: 4
        }, _c[":hover .".concat(classNames.icon)] = {
          opacity: 0,
          pointerEvents: "none"
        }, _c)
      },
      hasFocus && [
        "is-active",
        {
          position: "relative"
        },
        getInputFocusStyle(semanticColors.inputFocusBorderAlt, underlined ? 0 : effects.roundedCorner2, underlined ? "borderBottom" : "border")
      ],
      showIcon && [
        {
          selectors: (_d = {}, _d[":hover .".concat(classNames.iconContainer)] = {
            width: 32
          }, _d[":hover .".concat(classNames.icon)] = {
            opacity: 1
          }, _d)
        }
      ],
      disabled && [
        "is-disabled",
        {
          borderColor: inputBorderDisabled,
          backgroundColor: inputBackgroundDisabled,
          pointerEvents: "none",
          cursor: "default",
          selectors: (_e = {}, _e[HighContrastSelector] = {
            borderColor: "GrayText"
          }, _e)
        }
      ],
      underlined && [
        "is-underlined",
        {
          borderWidth: "0 0 1px 0",
          borderRadius: 0,
          padding: "1px 0 1px 8px"
        }
      ],
      underlined && disabled && {
        backgroundColor: "transparent"
      },
      hasInput && "can-clear",
      className
    ],
    iconContainer: [
      classNames.iconContainer,
      {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        flexShrink: 0,
        fontSize: 16,
        width: 32,
        textAlign: "center",
        color: semanticColors.inputIcon,
        cursor: "text"
      },
      hasFocus && {
        width: 4
      },
      disabled && {
        color: semanticColors.inputIconDisabled
      },
      !disableAnimation && {
        transition: "width ".concat(AnimationVariables.durationValue1)
      },
      showIcon && hasFocus && {
        width: 32
      }
    ],
    icon: [
      classNames.icon,
      {
        opacity: 1
      },
      hasFocus && {
        opacity: 0,
        pointerEvents: "none"
      },
      !disableAnimation && {
        transition: "opacity ".concat(AnimationVariables.durationValue1, " 0s")
      },
      showIcon && hasFocus && {
        opacity: 1
      }
    ],
    clearButton: [
      classNames.clearButton,
      {
        display: "flex",
        flexDirection: "row",
        alignItems: "stretch",
        cursor: "pointer",
        flexBasis: "32px",
        flexShrink: 0,
        padding: 0,
        margin: "-1px 0px",
        selectors: {
          "&:hover .ms-Button": {
            backgroundColor: inputBackgroundHovered
          },
          "&:hover .ms-Button-icon": {
            color: inputIconAltHovered
          },
          ".ms-Button": {
            borderRadius: getRTL(theme) ? "1px 0 0 1px" : "0 1px 1px 0"
          },
          ".ms-Button-icon": {
            color: inputIconAlt
          }
        }
      }
    ],
    field: [
      classNames.field,
      normalize,
      getPlaceholderStyles(placeholderStyles),
      {
        backgroundColor: "transparent",
        border: "none",
        outline: "none",
        fontWeight: "inherit",
        fontFamily: "inherit",
        fontSize: "inherit",
        color: semanticColors.inputText,
        flex: "1 1 0px",
        minWidth: "0px",
        overflow: "hidden",
        textOverflow: "ellipsis",
        paddingBottom: 0.5,
        selectors: {
          "::-ms-clear": {
            display: "none"
          }
        }
      },
      disabled && {
        color: semanticColors.disabledText
      }
    ]
  };
}

export { getStyles };
