import { __assign } from 'tslib';
import { getGlobalClassNames, getFocusStyle, HighContrastSelector, AnimationClassNames, AnimationStyles, FontWeights } from '@uifabric/styling';
import { IsFocusVisibleClassName } from '@uifabric-vue/utilities';

var DetailsRowGlobalClassNames = {
  root: "ms-DetailsRow",
  compact: "ms-DetailsList--Compact",
  cell: "ms-DetailsRow-cell",
  cellAnimation: "ms-DetailsRow-cellAnimation",
  cellCheck: "ms-DetailsRow-cellCheck",
  check: "ms-DetailsRow-check",
  cellMeasurer: "ms-DetailsRow-cellMeasurer",
  listCellFirstChild: "ms-List-cell:first-child",
  isContentUnselectable: "is-contentUnselectable",
  isSelected: "is-selected",
  isCheckVisible: "is-check-visible",
  isRowHeader: "is-row-header",
  fields: "ms-DetailsRow-fields"
};
var IsFocusableSelector = "[data-is-focusable='true']";
var DEFAULT_CELL_STYLE_PROPS = {
  cellLeftPadding: 12,
  cellRightPadding: 8,
  cellExtraRightPadding: 24
};
var DEFAULT_ROW_HEIGHTS = {
  rowHeight: 42,
  compactRowHeight: 32
};
var values = __assign(__assign({}, DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });
var getStyles = function(props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
  var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _o = props.cellStyleProps, cellStyleProps = _o === void 0 ? DEFAULT_CELL_STYLE_PROPS : _o, enableUpdateAnimations = props.enableUpdateAnimations;
  var palette = theme.palette, fonts = theme.fonts;
  var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;
  var focusBorder = theme.semanticColors.focusBorder;
  var classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);
  var colors = {
    defaultHeaderText: neutralPrimary,
    defaultMetaText: neutralSecondary,
    defaultBackground: white,
    defaultHoverHeaderText: neutralDark,
    defaultHoverMetaText: neutralPrimary,
    defaultHoverBackground: neutralLighter,
    selectedHeaderText: neutralDark,
    selectedMetaText: neutralPrimary,
    selectedBackground: neutralLight,
    selectedHoverHeaderText: neutralDark,
    selectedHoverMetaText: neutralPrimary,
    selectedHoverBackground: neutralQuaternaryAlt,
    focusHeaderText: neutralDark,
    focusMetaText: neutralPrimary,
    focusBackground: neutralLight,
    focusHoverBackground: neutralQuaternaryAlt
  };
  var selectedStyles = [
    getFocusStyle(theme, { inset: -1, borderColor: focusBorder, outlineColor: white }),
    classNames.isSelected,
    {
      color: colors.selectedMetaText,
      background: colors.selectedBackground,
      borderBottom: "1px solid ".concat(white),
      selectors: (_a = {
        "&:before": {
          position: "absolute",
          display: "block",
          top: -1,
          height: 1,
          bottom: 0,
          left: 0,
          right: 0,
          content: "",
          borderTop: "1px solid ".concat(white)
        },
        "&:hover": {
          background: colors.selectedHoverBackground,
          color: colors.selectedHoverMetaText,
          selectors: (_b = {}, _b[".".concat(classNames.cell, " ").concat(HighContrastSelector)] = {
            color: "HighlightText",
            selectors: {
              "> a": {
                color: "HighlightText"
              }
            }
          }, _b[".".concat(classNames.isRowHeader)] = {
            color: colors.selectedHoverHeaderText,
            selectors: (_c = {}, _c[HighContrastSelector] = {
              color: "HighlightText"
            }, _c)
          }, _b[HighContrastSelector] = {
            background: "Highlight"
          }, _b)
        },
        "&:focus": {
          background: colors.focusBackground,
          selectors: (_d = {}, _d[".".concat(classNames.cell)] = {
            color: colors.focusMetaText,
            selectors: (_e = {}, _e[HighContrastSelector] = {
              color: "HighlightText",
              selectors: {
                "> a": {
                  color: "HighlightText"
                }
              }
            }, _e)
          }, _d[".".concat(classNames.isRowHeader)] = {
            color: colors.focusHeaderText,
            selectors: (_f = {}, _f[HighContrastSelector] = {
              color: "HighlightText"
            }, _f)
          }, _d[HighContrastSelector] = {
            background: "Highlight"
          }, _d)
        }
      }, _a[HighContrastSelector] = {
        background: "Highlight",
        color: "HighlightText",
        MsHighContrastAdjust: "none",
        selectors: {
          a: {
            color: "HighlightText"
          }
        }
      }, _a["&:focus:hover"] = {
        background: colors.focusHoverBackground
      }, _a)
    }
  ];
  var cannotSelectStyles = [
    classNames.isContentUnselectable,
    {
      userSelect: "none",
      cursor: "default"
    }
  ];
  var rootCompactStyles = {
    minHeight: values.compactRowHeight,
    border: 0
  };
  var cellCompactStyles = {
    minHeight: values.compactRowHeight,
    paddingTop: values.compactRowVerticalPadding,
    paddingBottom: values.compactRowVerticalPadding,
    paddingLeft: "".concat(cellStyleProps.cellLeftPadding, "px")
  };
  var defaultCellStyles = [
    getFocusStyle(theme, { inset: -1 }),
    classNames.cell,
    {
      display: "inline-block",
      position: "relative",
      boxSizing: "border-box",
      minHeight: values.rowHeight,
      verticalAlign: "top",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      paddingTop: values.rowVerticalPadding,
      paddingBottom: values.rowVerticalPadding,
      paddingLeft: "".concat(cellStyleProps.cellLeftPadding, "px"),
      selectors: (_g = {
        "& > button": {
          maxWidth: "100%"
        }
      }, _g[IsFocusableSelector] = getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white }), _g)
    },
    isSelected && {
      selectors: (_h = {}, _h[HighContrastSelector] = {
        background: "Highlight",
        color: "HighlightText",
        MsHighContrastAdjust: "none",
        selectors: {
          a: {
            color: "HighlightText"
          }
        }
      }, _h)
    },
    compact && cellCompactStyles
  ];
  return {
    root: [
      classNames.root,
      AnimationClassNames.fadeIn400,
      droppingClassName,
      theme.fonts.small,
      isCheckVisible && classNames.isCheckVisible,
      getFocusStyle(theme, { borderColor: focusBorder, outlineColor: white }),
      {
        borderBottom: "1px solid ".concat(neutralLighter),
        background: colors.defaultBackground,
        color: colors.defaultMetaText,
        display: "inline-flex",
        minWidth: "100%",
        minHeight: values.rowHeight,
        whiteSpace: "nowrap",
        padding: 0,
        boxSizing: "border-box",
        verticalAlign: "top",
        textAlign: "left",
        selectors: (_j = {}, _j[".".concat(classNames.listCellFirstChild, " &:before")] = {
          display: "none"
        }, _j["&:hover"] = {
          background: colors.defaultHoverBackground,
          color: colors.defaultHoverMetaText,
          selectors: (_k = {}, _k[".".concat(classNames.isRowHeader)] = {
            color: colors.defaultHoverHeaderText
          }, _k)
        }, _j["&:hover .".concat(classNames.check)] = {
          opacity: 1
        }, _j[".".concat(IsFocusVisibleClassName, " &:focus .").concat(classNames.check)] = {
          opacity: 1
        }, _j)
      },
      isSelected && selectedStyles,
      !canSelect && cannotSelectStyles,
      compact && rootCompactStyles,
      className
    ],
    cellUnpadded: {
      paddingRight: "".concat(cellStyleProps.cellRightPadding, "px")
    },
    cellPadded: {
      paddingRight: "".concat(cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding, "px"),
      selectors: (_l = {}, _l["&.".concat(classNames.cellCheck)] = {
        paddingRight: 0
      }, _l)
    },
    cell: defaultCellStyles,
    cellAnimation: enableUpdateAnimations && AnimationStyles.slideLeftIn40,
    cellMeasurer: [
      classNames.cellMeasurer,
      {
        overflow: "visible",
        whiteSpace: "nowrap"
      }
    ],
    checkCell: [
      defaultCellStyles,
      classNames.cellCheck,
      checkboxCellClassName,
      {
        padding: 0,
        paddingTop: 1,
        marginTop: -1,
        flexShrink: 0
      }
    ],
    checkCover: {
      position: "absolute",
      top: -1,
      left: 0,
      bottom: 0,
      right: 0,
      display: anySelected ? "block" : "none"
    },
    fields: [
      classNames.fields,
      {
        display: "flex",
        alignItems: "stretch"
      }
    ],
    isRowHeader: [
      classNames.isRowHeader,
      {
        color: colors.defaultHeaderText,
        fontSize: fonts.medium.fontSize
      },
      isSelected && {
        color: colors.selectedHeaderText,
        fontWeight: FontWeights.semibold,
        selectors: (_m = {}, _m[HighContrastSelector] = {
          color: "HighlightText"
        }, _m)
      }
    ],
    isMultiline: [
      defaultCellStyles,
      {
        whiteSpace: "normal",
        wordBreak: "break-word",
        textOverflow: "clip"
      }
    ],
    check: [classNames.check]
  };
};

export { DEFAULT_CELL_STYLE_PROPS, DEFAULT_ROW_HEIGHTS, DetailsRowGlobalClassNames, getStyles };
