import * as tslib_1 from "tslib";
import { AnimationClassNames, FontSizes, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-DetailsRow',
    compact: 'ms-DetailsList--Compact',
    cell: 'ms-DetailsRow-cell',
    cellCheck: 'ms-DetailsRow-cellCheck',
    cellMeasurer: 'ms-DetailsRow-cellMeasurer',
    listCellFirstChild: 'ms-List-cell:first-child',
    isFocusable: "[data-is-focusable='true']",
    isContentUnselectable: 'is-contentUnselectable',
    isSelected: 'is-selected',
    isCheckVisible: 'is-check-visible',
    fields: 'ms-DetailsRow-fields'
};
export var DEFAULT_CELL_STYLE_PROPS = {
    cellLeftPadding: 12,
    cellRightPadding: 8,
    cellExtraRightPadding: 24
};
// Constant values
var values = {
    rowHeight: 42,
    compactRowHeight: 32,
    rowVerticalPadding: 11,
    compactRowVerticalPadding: 6,
    rowShimmerLineHeight: 7,
    rowShimmerIconPlaceholderHeight: 16,
    rowShimmerVerticalBorder: 0,
    compactRowShimmerVerticalBorder: 0
};
// Computed Values
values = tslib_1.__assign({}, values, {
    rowShimmerVerticalBorder: (values.rowHeight - values.rowShimmerLineHeight) / 2,
    compactRowShimmerVerticalBorder: (values.compactRowHeight - values.rowShimmerLineHeight) / 2
});
export var getStyles = function (props) {
    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, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;
    var _b = theme.palette, neutralPrimary = _b.neutralPrimary, white = _b.white, neutralSecondary = _b.neutralSecondary, neutralLighter = _b.neutralLighter, neutralLight = _b.neutralLight, neutralDark = _b.neutralDark, neutralQuaternaryAlt = _b.neutralQuaternaryAlt, black = _b.black, themePrimary = _b.themePrimary;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    var colors = {
        // Default
        defaultHeaderTextColor: neutralPrimary,
        defaultMetaTextColor: neutralSecondary,
        defaultBackgroundColor: white,
        // Hover
        hoverTextColor: neutralPrimary,
        hoverColorBackground: neutralLighter,
        // Selected
        selectedTextColor: neutralDark,
        selectedMetaTextColor: neutralPrimary,
        selectedBackgroundColor: neutralLight,
        // Selected Hover
        selectedHoverTextColor: black,
        selectedHoverMetaTextColor: neutralDark,
        selectedHoverBackgroundColor: neutralQuaternaryAlt,
        // Focus
        focusHeaderTextColor: black,
        focusBackgroundColor: neutralQuaternaryAlt,
        focusMetaTextColor: neutralDark
    };
    var shimmerRightBorderStyle = cellStyleProps.cellRightPadding * 4 + "px solid " + colors.defaultBackgroundColor;
    var shimmerLeftBorderStyle = cellStyleProps.cellLeftPadding + "px solid " + colors.defaultBackgroundColor;
    var selectedStyles = [
        getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
        classNames.isSelected,
        {
            color: colors.selectedMetaTextColor,
            background: colors.selectedBackgroundColor,
            borderBottom: "1px solid " + white,
            selectors: {
                '&:before': {
                    position: 'absolute',
                    display: 'block',
                    top: -1,
                    height: 1,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    content: '',
                    borderTop: "1px solid " + white
                },
                // Selected State hover
                '&:hover': {
                    background: colors.selectedHoverBackgroundColor,
                    selectors: {
                        // Selected State hover meta cell
                        $cell: {
                            color: colors.selectedHoverMetaTextColor,
                            selectors: (_c = {},
                                _c[HighContrastSelector] = {
                                    color: 'HighlightText',
                                    selectors: {
                                        '> a': {
                                            color: 'HighlightText'
                                        }
                                    }
                                },
                                // Selected State hover Header cell
                                _c['&.$isRowHeader'] = {
                                    color: colors.selectedHoverTextColor,
                                    selectors: (_d = {},
                                        _d[HighContrastSelector] = {
                                            color: 'HighlightText'
                                        },
                                        _d)
                                },
                                _c)
                        }
                    }
                },
                // Focus state
                '&:focus': {
                    background: colors.focusBackgroundColor,
                    selectors: {
                        // Selected State hover meta cell
                        $cell: (_e = {
                                color: colors.focusMetaTextColor
                            },
                            _e[HighContrastSelector] = {
                                color: 'HighlightText',
                                selectors: {
                                    '> a': {
                                        color: 'HighlightText'
                                    }
                                }
                            },
                            // Row header cell
                            _e['&.$isRowHeader'] = {
                                color: colors.focusHeaderTextColor,
                                selectors: (_f = {},
                                    _f[HighContrastSelector] = {
                                        color: 'HighlightText'
                                    },
                                    _f)
                            },
                            _e)
                    }
                }
            }
        }
    ];
    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: cellStyleProps.cellLeftPadding + "px",
        selectors: (_g = {},
            // Masking the running shimmer background with borders
            _g["&$shimmer"] = {
                padding: 0,
                borderLeft: shimmerLeftBorderStyle,
                borderRight: shimmerRightBorderStyle,
                borderTop: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                borderBottom: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
            },
            // Masking the running shimmer background with borders when it's an Icon placeholder
            _g["&$shimmerIconPlaceholder"] = {
                borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
                borderBottom: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                borderTop: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
            },
            _g)
    };
    var defaultCellStyles = [
        getFocusStyle(theme, -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: cellStyleProps.cellLeftPadding + "px",
            selectors: (_h = {
                    '& > button': {
                        maxWidth: '100%'
                    }
                },
                _h[classNames.isFocusable] = getFocusStyle(theme, -1, undefined, undefined, neutralSecondary, white),
                _h['&$shimmer'] = {
                    padding: 0,
                    borderLeft: shimmerLeftBorderStyle,
                    borderRight: shimmerRightBorderStyle,
                    borderTop: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
                    borderBottom: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
                },
                _h['&$shimmerIconPlaceholder'] = {
                    borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
                    borderBottom: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
                    borderTop: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
                },
                _h)
        },
        isSelected && {
            selectors: (_j = {
                    '&.$isRowHeader': {
                        color: colors.selectedTextColor,
                        selectors: (_k = {},
                            _k[HighContrastSelector] = {
                                color: 'HighlightText'
                            },
                            _k)
                    }
                },
                _j[HighContrastSelector] = {
                    background: 'Highlight',
                    color: 'HighlightText',
                    '-ms-high-contrast-adjust': 'none',
                    selectors: {
                        a: {
                            color: 'HighlightText'
                        }
                    }
                },
                _j)
        },
        compact && cellCompactStyles
    ];
    return {
        root: [
            classNames.root,
            AnimationClassNames.fadeIn400,
            droppingClassName,
            theme.fonts.small,
            isCheckVisible && classNames.isCheckVisible,
            getFocusStyle(theme, 0, undefined, undefined, isSelected ? neutralSecondary : themePrimary, white),
            {
                borderBottom: "1px solid " + neutralLighter,
                background: colors.defaultBackgroundColor,
                color: colors.defaultMetaTextColor,
                display: 'inline-flex',
                minWidth: '100%',
                minHeight: values.rowHeight,
                whiteSpace: 'nowrap',
                padding: 0,
                boxSizing: 'border-box',
                verticalAlign: 'top',
                textAlign: 'left',
                selectors: (_l = {},
                    _l[classNames.listCellFirstChild + " &:before"] = {
                        display: 'none'
                    },
                    _l['&:hover'] = {
                        background: colors.hoverColorBackground
                    },
                    _l['&:hover $check'] = {
                        opacity: 1
                    },
                    _l)
            },
            isSelected && selectedStyles,
            !canSelect && cannotSelectStyles,
            compact && rootCompactStyles,
            className
        ],
        cellUnpadded: [
            {
                paddingRight: cellStyleProps.cellRightPadding + "px"
            }
        ],
        cellPadded: [
            {
                paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding + "px",
                selectors: {
                    '&.$checkCell': {
                        paddingRight: 0
                    }
                }
            }
        ],
        cell: defaultCellStyles,
        cellMeasurer: [
            classNames.cellMeasurer,
            {
                overflow: 'visible',
                whiteSpace: 'nowrap'
            }
        ],
        checkCell: [
            defaultCellStyles,
            classNames.cellCheck,
            checkboxCellClassName,
            {
                padding: 0,
                // Ensure that the check cell covers the top border of the cell.
                // This ensures the click target does not leave a spot which would
                // cause other items to be deselected.
                paddingTop: 1,
                marginTop: -1,
                flexShrink: 0
            }
        ],
        checkCover: [
            {
                position: 'absolute',
                top: -1,
                left: 0,
                bottom: 0,
                right: 0,
                display: 'none'
            },
            anySelected && {
                display: 'block'
            }
        ],
        fields: [
            classNames.fields,
            {
                display: 'flex',
                alignItems: 'stretch'
            }
        ],
        isRowHeader: [
            {
                color: colors.defaultHeaderTextColor,
                fontSize: FontSizes.medium
            }
        ],
        isMultiline: [
            defaultCellStyles,
            {
                whiteSpace: 'normal',
                wordBreak: 'break-word',
                textOverflow: 'clip'
            }
        ],
        shimmer: [],
        shimmerIconPlaceholder: [],
        shimmerLeftBorder: [
            {
                // 40px to take into account the checkbox of items if present.
                borderLeft: "40px solid " + colors.defaultBackgroundColor
            }
        ],
        shimmerBottomBorder: [
            {
                // 1px to take into account the border-bottom when items replace shimmer lines and in default state.
                borderBottom: "1px solid " + colors.defaultBackgroundColor
            }
        ],
        check: []
    };
    var _c, _d, _e, _f, _g, _h, _j, _k, _l;
};
//# sourceMappingURL=DetailsRow.styles.js.map