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

var CELL_BORDER_BREAKPOINT = 24;
var LARGE_BORDER = 4;
var SMALL_BORDER = 2;
var DIVIDING_PADDING = 2;
var DEFAULT_CELL_SIZE = 20;
var cellHighContrastFocus = {
  left: -2,
  top: -2,
  bottom: -2,
  right: -2,
  border: "none",
  outlineColor: "ButtonText"
};
var getStyles = function(props) {
  var _a, _b, _c;
  var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite, _d = props.height, height = _d === void 0 ? DEFAULT_CELL_SIZE : _d, _e = props.width, width = _e === void 0 ? DEFAULT_CELL_SIZE : _e, borderWidth = props.borderWidth;
  var semanticColors = theme.semanticColors, palette = theme.palette;
  var buttonBorderHovered = palette.neutralLighter;
  var buttonBorderChecked = palette.neutralLight;
  var buttonBorderCheckedHovered = palette.neutralSecondary;
  var buttonBorderIsWhite = palette.neutralTertiary;
  var calculatedBorderWidth = borderWidth || (width < CELL_BORDER_BREAKPOINT ? SMALL_BORDER : LARGE_BORDER);
  return {
    colorCell: [
      getFocusStyle(theme, -1, "relative", cellHighContrastFocus),
      {
        backgroundColor: semanticColors.bodyBackground,
        padding: 0,
        position: "relative",
        boxSizing: "border-box",
        display: "inline-block",
        cursor: "pointer",
        userSelect: "none",
        borderRadius: 0,
        border: "none",
        height: height,
        width: width
      },
      !circle && {
        selectors: (_a = {}, _a[".".concat(IsFocusVisibleClassName, " &:focus::after")] = {
          outlineOffset: "".concat(calculatedBorderWidth - 1, "px")
        }, _a)
      },
      circle && {
        borderRadius: "50%",
        selectors: (_b = {}, _b[".".concat(IsFocusVisibleClassName, " &:focus::after")] = {
          outline: "none",
          borderColor: semanticColors.focusBorder,
          borderRadius: "50%",
          left: -calculatedBorderWidth,
          right: -calculatedBorderWidth,
          top: -calculatedBorderWidth,
          bottom: -calculatedBorderWidth,
          selectors: (_c = {}, _c[HighContrastSelector] = {
            outline: "1px solid ButtonText"
          }, _c)
        }, _b)
      },
      selected && {
        padding: DIVIDING_PADDING,
        border: "".concat(calculatedBorderWidth, "px solid ").concat(buttonBorderChecked),
        selectors: {
          "&:hover::before": {
            content: '""',
            height: height,
            width: width,
            position: "absolute",
            top: -calculatedBorderWidth,
            left: -calculatedBorderWidth,
            borderRadius: circle ? "50%" : "default",
            boxShadow: "inset 0 0 0 1px ".concat(buttonBorderCheckedHovered)
          }
        }
      },
      !selected && {
        selectors: {
          "&:hover, &:active, &:focus": {
            backgroundColor: semanticColors.bodyBackground,
            padding: DIVIDING_PADDING,
            border: "".concat(calculatedBorderWidth, "px solid ").concat(buttonBorderHovered)
          },
          "&:focus": {
            borderColor: semanticColors.bodyBackground,
            padding: 0,
            selectors: {
              ":hover": {
                borderColor: theme.palette.neutralLight,
                padding: DIVIDING_PADDING
              }
            }
          }
        }
      },
      disabled && {
        color: semanticColors.disabledBodyText,
        pointerEvents: "none",
        opacity: 0.3
      },
      isWhite && !selected && {
        backgroundColor: buttonBorderIsWhite,
        padding: 1
      }
    ],
    svg: [
      {
        width: "100%",
        height: "100%"
      },
      circle && {
        borderRadius: "50%"
      }
    ]
  };
};

export { getStyles };
