import { getGlobalClassNames, HighContrastSelector } from '@uifabric/styling';
import { IsFocusVisibleClassName } from '@uifabric-vue/utilities';

var GlobalClassNames = {
  root: "ms-ChoiceField",
  choiceFieldWrapper: "ms-ChoiceField-wrapper",
  input: "ms-ChoiceField-input",
  field: "ms-ChoiceField-field",
  innerField: "ms-ChoiceField-innerField",
  imageWrapper: "ms-ChoiceField-imageWrapper",
  iconWrapper: "ms-ChoiceField-iconWrapper",
  labelWrapper: "ms-ChoiceField-labelWrapper",
  checked: "is-checked"
};
var labelWrapperLineHeight = 15;
var iconSize = 32;
var choiceFieldSize = 20;
var choiceFieldTransitionDuration = "200ms";
var choiceFieldTransitionTiming = "cubic-bezier(.4, 0, .23, 1)";
var radioButtonSpacing = 3;
var radioButtonInnerSize = 5;
function getChoiceGroupFocusStyle(focusBorderColor, hasIconOrImage) {
  var _a, _b;
  return [
    "is-inFocus",
    {
      selectors: (_a = {}, _a[".".concat(IsFocusVisibleClassName, " &")] = {
        position: "relative",
        outline: "transparent",
        selectors: {
          "::-moz-focus-inner": {
            border: 0
          },
          ":after": {
            content: '""',
            top: -2,
            right: -2,
            bottom: -2,
            left: -2,
            pointerEvents: "none",
            border: "1px solid ".concat(focusBorderColor),
            position: "absolute",
            selectors: (_b = {}, _b[HighContrastSelector] = {
              borderColor: "WindowText",
              borderWidth: hasIconOrImage ? 1 : 2
            }, _b)
          }
        }
      }, _a)
    }
  ];
}
function getImageWrapperStyle(isSelectedImageWrapper, className, checked) {
  return [
    className,
    {
      paddingBottom: 2,
      transitionProperty: "opacity",
      transitionDuration: choiceFieldTransitionDuration,
      transitionTimingFunction: "ease",
      selectors: {
        ".ms-Image": {
          display: "inline-block",
          borderStyle: "none"
        }
      }
    },
    (checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [
      "is-hidden",
      {
        position: "absolute",
        left: 0,
        top: 0,
        width: "100%",
        height: "100%",
        overflow: "hidden",
        opacity: 0
      }
    ]
  ];
}
var getStyles = function(props) {
  var _a, _b, _c, _d, _e;
  var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused, imageSize = props.imageSize;
  var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
  var classNames = getGlobalClassNames(GlobalClassNames, theme);
  var circleBorderColor = palette.neutralPrimary;
  var circleHoveredBorderColor = semanticColors.inputBorderHovered;
  var circleCheckedBorderColor = semanticColors.inputBackgroundChecked;
  var circleCheckedHoveredBorderColor = palette.themeDark;
  var circleDisabledBorderColor = semanticColors.disabledBodySubtext;
  var circleBackgroundColor = semanticColors.bodyBackground;
  var dotUncheckedHoveredColor = palette.neutralSecondary;
  var dotCheckedColor = semanticColors.inputBackgroundChecked;
  var dotCheckedHoveredColor = palette.themeDark;
  var dotDisabledColor = semanticColors.disabledBodySubtext;
  var labelHoverFocusColor = palette.neutralDark;
  var focusBorderColor = semanticColors.focusBorder;
  var iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;
  var iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;
  var iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;
  var iconOrImageChoiceBackgroundColor = palette.neutralLighter;
  var fieldHoverOrFocusProperties = {
    selectors: {
      ".ms-ChoiceFieldLabel": {
        color: labelHoverFocusColor
      },
      ":before": {
        borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor
      },
      ":after": [
        !hasIcon && !hasImage && !checked && {
          content: '""',
          transitionProperty: "background-color",
          left: 5,
          top: 5,
          width: 10,
          height: 10,
          backgroundColor: dotUncheckedHoveredColor
        },
        checked && {
          borderColor: dotCheckedHoveredColor
        }
      ]
    }
  };
  var enabledFieldWithImageHoverOrFocusProperties = {
    borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,
    selectors: {
      ":before": {
        opacity: 1,
        borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor
      }
    }
  };
  var circleAreaProperties = [
    {
      content: '""',
      display: "inline-block",
      backgroundColor: circleBackgroundColor,
      borderWidth: 1,
      borderStyle: "solid",
      borderColor: circleBorderColor,
      width: choiceFieldSize,
      height: choiceFieldSize,
      fontWeight: "normal",
      position: "absolute",
      top: 0,
      left: 0,
      boxSizing: "border-box",
      transitionProperty: "border-color",
      transitionDuration: choiceFieldTransitionDuration,
      transitionTimingFunction: choiceFieldTransitionTiming,
      borderRadius: "50%"
    },
    disabled && {
      borderColor: circleDisabledBorderColor,
      selectors: (_a = {}, _a[HighContrastSelector] = {
        color: "GrayText"
      }, _a)
    },
    checked && {
      borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,
      selectors: (_b = {}, _b[HighContrastSelector] = {
        borderColor: "Highlight"
      }, _b)
    },
    (hasIcon || hasImage) && {
      top: radioButtonSpacing,
      right: radioButtonSpacing,
      left: "auto",
      opacity: checked ? 1 : 0
    }
  ];
  var dotAreaProperties = [
    {
      content: '""',
      width: 0,
      height: 0,
      borderRadius: "50%",
      position: "absolute",
      left: choiceFieldSize / 2,
      right: 0,
      transitionProperty: "border-width",
      transitionDuration: choiceFieldTransitionDuration,
      transitionTimingFunction: choiceFieldTransitionTiming,
      boxSizing: "border-box"
    },
    checked && {
      borderWidth: 5,
      borderStyle: "solid",
      borderColor: disabled ? dotDisabledColor : dotCheckedColor,
      left: 5,
      top: 5,
      width: 10,
      height: 10,
      selectors: (_c = {}, _c[HighContrastSelector] = {
        borderColor: "Highlight"
      }, _c)
    },
    checked && (hasIcon || hasImage) && {
      top: radioButtonSpacing + radioButtonInnerSize,
      right: radioButtonSpacing + radioButtonInnerSize,
      left: "auto"
    }
  ];
  return {
    root: [
      classNames.root,
      theme.fonts.medium,
      {
        display: "flex",
        alignItems: "center",
        boxSizing: "border-box",
        color: semanticColors.bodyText,
        minHeight: 26,
        border: "none",
        position: "relative",
        marginTop: 8,
        selectors: {
          ".ms-ChoiceFieldLabel": {
            display: "inline-block"
          }
        }
      },
      !hasIcon && !hasImage && {
        selectors: {
          ".ms-ChoiceFieldLabel": {
            paddingLeft: "26px"
          }
        }
      },
      hasImage && "ms-ChoiceField--image",
      hasIcon && "ms-ChoiceField--icon",
      (hasIcon || hasImage) && {
        display: "inline-flex",
        fontSize: 0,
        margin: "0 4px 4px 0",
        paddingLeft: 0,
        backgroundColor: iconOrImageChoiceBackgroundColor,
        height: "100%"
      }
    ],
    choiceFieldWrapper: [classNames.choiceFieldWrapper, focused && getChoiceGroupFocusStyle(focusBorderColor, hasIcon || hasImage)],
    input: [
      classNames.input,
      {
        position: "absolute",
        opacity: 0,
        top: 0,
        right: 0,
        width: "100%",
        height: "100%",
        margin: 0
      },
      disabled && "is-disabled"
    ],
    field: [
      classNames.field,
      checked && classNames.checked,
      {
        display: "inline-block",
        cursor: "pointer",
        marginTop: 0,
        position: "relative",
        verticalAlign: "top",
        userSelect: "none",
        minHeight: 20,
        selectors: {
          ":hover": !disabled && fieldHoverOrFocusProperties,
          ":focus": !disabled && fieldHoverOrFocusProperties,
          ":before": circleAreaProperties,
          ":after": dotAreaProperties
        }
      },
      hasIcon && "ms-ChoiceField--icon",
      hasImage && "ms-ChoiceField-field--image",
      (hasIcon || hasImage) && {
        boxSizing: "content-box",
        cursor: "pointer",
        paddingTop: 22,
        margin: 0,
        textAlign: "center",
        transitionProperty: "all",
        transitionDuration: choiceFieldTransitionDuration,
        transitionTimingFunction: "ease",
        border: "1px solid transparent",
        justifyContent: "center",
        alignItems: "center",
        display: "flex",
        flexDirection: "column"
      },
      checked && {
        borderColor: iconOrImageChoiceBorderCheckedColor
      },
      (hasIcon || hasImage) && !disabled && {
        selectors: {
          ":hover": enabledFieldWithImageHoverOrFocusProperties,
          ":focus": enabledFieldWithImageHoverOrFocusProperties
        }
      },
      disabled && {
        cursor: "default",
        selectors: (_d = {
          ".ms-ChoiceFieldLabel": {
            color: semanticColors.disabledBodyText
          }
        }, _d[HighContrastSelector] = {
          color: "GrayText"
        }, _d)
      },
      checked && disabled && {
        borderColor: iconOrImageChoiceBackgroundColor
      }
    ],
    innerField: [
      classNames.innerField,
      hasImage && {
        height: imageSize.height,
        width: imageSize.width
      },
      (hasIcon || hasImage) && {
        position: "relative",
        display: "inline-block",
        paddingLeft: 30,
        paddingRight: 30
      },
      (hasIcon || hasImage) && imageIsLarge && {
        paddingLeft: 24,
        paddingRight: 24
      },
      (hasIcon || hasImage) && disabled && {
        opacity: 0.25,
        selectors: (_e = {}, _e[HighContrastSelector] = {
          color: "GrayText",
          opacity: 1
        }, _e)
      }
    ],
    imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),
    selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),
    iconWrapper: [
      classNames.iconWrapper,
      {
        fontSize: iconSize,
        lineHeight: iconSize,
        height: iconSize
      }
    ],
    labelWrapper: [
      classNames.labelWrapper,
      fonts.medium,
      (hasIcon || hasImage) && {
        display: "block",
        position: "relative",
        margin: "4px 8px",
        height: labelWrapperLineHeight * 2,
        lineHeight: labelWrapperLineHeight,
        maxWidth: imageSize.width * 2,
        overflow: "hidden",
        whiteSpace: "pre-wrap",
        textOverflow: "ellipsis"
      }
    ]
  };
};

export { getStyles };
